uniapp 底部导航tabBar---循环获取刷新的数字角标

整体思路

        在全局 App.vue 中定义一个定时刷新消息的方法，然后通过uni.$on（）监听对应点击的  tabBar页面 所传参数，进行判断执行对应的操作。当你在 tabBar页面 时，会通过uni.$emit（）传参（获取并刷新最新消息），当你切换到 非tabBar页面 时，onHide 取消监听（停止获取消息）。

---

说明：为什么不全局app控制底部tab消息数量的刷新显示呢？

        因为当前页面非tab时，可是会报错的哦！也就是下面的报错（下面图是借用的，懒的改代码截图报错了，体谅一下）

错误原因：

        因为当你使用uni.setTabBarBadge设置角标或者红点时，必须在tabBer页面设置，当你跳转到非tabBer页面时就会出现报错。

        你可能会说：那怎么办呢？

        我：耐心的看下去哦，为了你那不报错的代码。

---

一. 在 app.vue 入口文件 created函数中，设置uni.$on('News'）监听事件,根据tabBer页面传参进行判断执行对应事件；

代码如下：

created: function() {
    uni.$on('News', res => {
		console.log(res.msg)
		if (res.msg == 'monitor') {
            // 进入tabBer页面时执行定时器
			this.startTimer()
		} else {
            // 离开tabBer页面清除定时器
			clearInterval(this.timer)
		}
	})
},

二.定义了开始和结束的方法，用于执行和清除定时器操作；

代码如下：

methods: {
	startTimer() {
		this.timer = setInterval(() => {
			let num = uni.getStorageSync("numberOfMessage"); // 获取本地缓存数据
			if (num != num) { // 有新的消息时刷新消息
				uni.setTabBarBadge({
					index: 1,
					text: String(num)
				})
			} else if (num == num && num > 0) { // 消息不变并且消息数大于0
                // 设置角标
				uni.setTabBarBadge({
					index: 1,
					text: String(num)
				})
			} else { // 无消息
                // 移除角标
				uni.removeTabBarBadge({
					index: 1
				})
    			clearInterval(this.timer)
			}
		}, 1000); // 1000毫秒即1秒
	},
	stopTimer() {
		clearInterval(this.timer); // 关闭定时器
	}
}

 三.进入TabBar页面和离开TabBar页面;

       为什么放在onHide中呢？

              onHide()触发场景 ：当前页面 ==》其他页面  当前页面会触发onHide();

              onUnload()触发的场景：页面2返回到（页面1或者导航页）时，页面2只会触发onUnload(),并不会触发onHide()；

              大白话就是：页面切换看onHide(),页面返回用onUnload()

		onShow() {
			console.log("页面刷新")
			uni.$emit('News', {
				msg: 'monitor'
			})
		},
		onLoad() {},
		onHide() {
			console.log('离开当前页面')
			// 正确示例：提供正确的回调函数参数
			uni.$emit('News', {
				msg: 'departure'
			})
		},

---

提示：记得不要忘记在data中声明消息数，并把它缓存在本地呦（放在你设置的角标消息页面哦）！

NumOfMessage: 6, //消息数

uni.setStorageSync('numberOfMessage', this.NumOfMessage)

大家看完有什么觉得可以优化的地方，希望提出来分享一下哦！