uniapp-vuex實現tabbar提示點

底部入口欄的紅點提示是app中常見的功能，或者說是必要功能，通常用來提醒用戶去查看或操作某個模塊內容。

 

看項目性質如果需要比較多並且靈活的提示，則需要用到長連接技術。

 

1、紅點提示是根據接口返回的數據狀態來表現的。

2、需要及時更新響應紅點的狀態

3、不建議頻繁調用接口（比如tabbar頁面的onShow里面執行接口），且這種方式會讓紅點閃爍造成體驗不好。

 

注意事項：

設置tabbar入口的紅點方法，親測只在tabbar頁面生效，后續官方是否完善猶未可知。

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

 

下面講解使用vuex實現紅點狀態

先創建一個index.js，按vuex的語法寫上要記錄紅點的屬性名和修改方法

 

然后在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});
}