Blame view

pages/template/nav-dot/nav-dot.vue 1.71 KB
4b045f7c   刘淇   江阴初始化项目
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
  <template>
  	<view>
  		<page-head :title="title"></page-head>
  		<view class="uni-padding-wrap uni-common-mt">
  			<view class="uni-title"> <uni-icons size="16" type="info"></uni-icons>说明 : </view>
  			<view class="uni-helllo-text">
  				<view
  					>在App端可在pages.json里配置buttons,暂不支持动态改变buttons的样式,使用onNavigationBarButtonTap可监听红点按钮的点击事件。</view
  				>
  			</view>
  		</view>
  	</view>
  </template>
  <script>
  export default {
  	data() {
  		return {
  			title: 'nav-dot'
  		};
  	},
  	onReady() {
  		this.setStyle(0,true);
  		this.setStyle(1,true,'9');
  
  	},
  	methods: {
  		/**
  		 * 修改导航栏buttons
  		 * index[number] 修改的buttons 下标索引,最右边索引为0
  		 * show[boolean] 显示还是隐藏角标或者红点
  		 * text[string] 需要修改的角标的text 内容 ,如果定义redDot 此参数无效 ,如果定义badgeText请设置具体,如果不用输入
  		 */
  		setStyle(index, show,text) {
  			let pages = getCurrentPages();
  			let page = pages[pages.length - 1];
  			// #ifdef APP-PLUS
  			let currentWebview = page.$getAppWebview();
  			if(show){
  				if(index === 0){
  					currentWebview.showTitleNViewButtonRedDot({index:index,text:text})
  				}else{
  					currentWebview.setTitleNViewButtonBadge({index:index,text:text})
  				}
  			}else{
  				if(index === 0){
  					currentWebview.hideTitleNViewButtonRedDot({index:index})
  				}else{
  					currentWebview.removeTitleNViewButtonBadge({index:index})
  				}
  			}
  			
  			// #endif
  		}
  	},
  	onNavigationBarButtonTap(e) {
  		uni.showToast({
  			title: e.index === 0 ? '你点了消息按钮' : '你点了关注按钮', 
  			icon: 'none'
  		});
  		// 取消红点或者角标 
  		this.setStyle(e.index,false);
  	}
  };
  </script>
  
  <style></style>