67 lines
1.7 KiB
Vue
67 lines
1.7 KiB
Vue
|
<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>
|