uniapp-vuex实现tabbar提示点

底部入口栏的红点提示是app中常见的功能,或者说是必要功能,通常用来提醒用户去查看或操作某个模块内容。

1、红点提示是根据接口返回的数据状态来表现的。

2、需要及时更新响应红点的状态

3、不建议频繁调用接口(比如tabbar页面的onShow里面执行接口),且这种方式会让红点闪烁造成体验不好。

 

注意事项:

设置tabbar入口的红点方法,亲测只在tabbar页面生效,后续官方是否完善犹未可知。

uni.showTabBarRedDot({index:1});
uni.hideTabBarRedDot({index:1});

 

下面讲解使用vuex实现红点状态

先创建一个index.js,按vuex的语法写上要记录红点的属性名和修改方法

uniapp-vuex实现tabbar提示点

 

然后在main.js中引用

import store  from ‘store/index.js‘

Vue.prototype.$store = store;

 

在index.vue中 (这里作为整个app的首页,也是个tabbar页面)引入

import { mapState,mapMutations} from ‘vuex‘;

在计算属性中添加

  computed:{
  ...mapState([‘trainPlanNum‘, ‘trainTimeNum‘,‘schoolPlanNum‘,‘trainTaskNum‘])
  },

 在method中展开更改方法

   ...mapMutations([‘setStoreNum‘])

 

然后就是:

1、在首页的onload中调用查询红点数据的接口判断是否出现红点

2、在会对红点产生数据变动的页面引入vuex这些属性和方法并同步vuex属性值

 

只要是能进入变更页的tabbar页面,在其onShow方法这里都应该再加上状态判断

if(this.trainPlanNum == 0 && this.trainTimeNum == 0 && this.schoolPlanNum == 0 && this.trainTaskNum == 0){
  uni.hideTabBarRedDot({index:1});
}else{
  uni.showTabBarRedDot({index:1});
}

 

uniapp-vuex实现tabbar提示点

上一篇:Android Training - 详解Activity声明周期(Lesson 0 - 章节概要)


下一篇:Android studio 开发app页面去除顶部原有项目标题框框