uniapp底部标签栏（Tab Bar）未读提示的实现思路

在移动端开发中，确保用户能够及时获悉新消息是提升用户体验的关键。有时候，我们会遇到在标签栏某一下级页面中有未读提示，但是在底部标签栏中没有提醒，导致用户不能及时了解到有未读消息的情况，下面笔者分享一种实现思路。

场景设定

我们模拟一个场景：在底部标签栏有两个标签页面，分别为：首页和我的，在我的页面下有一个未读消息页面，该页面接收未读消息并进行处理。
我们要实现的目标为：

1. 当用户启动 APP 时，在“我的”导航项上显示未读消息提示及消息数量。
2. 当用户进入未读消息进行处理并返回”我的“页面时会对未读消息条数进行实时响应。

要实现这一目标，关键在于如何实时响应未读消息的变化。这里，我们选择使用 VueX 来管理应用状态。

使用 Vuex

在 uniapp 中引入 VueX 和 VueX 的使用就不进行赘述，我们直接在 store 文件夹下的 modules 文件夹下创建一个名为 unreadInfo.js 的 js 文件，并在其中写入：

import { unReadCount } from '@/apis/message/message';

export default {
  namespaced: true,
  state: {
    unRedNum: 0
  },
  mutations: {
    setUnreadCount(state, count) {
      state.unRedNum = count
    }
  },
  actions: {
    async getUnReadCount({ commit }) {
      try {
        const response = await unReadCount()
        console.log(response)
        commit('setUnreadCount', response)
      } catch (error) {
        console.error('获取未读计数失败:', error)
      }
    }
  },
  getters: {
    unreadCount: state => state.unRedNum
  }
}

并且在 store 文件夹下进行引用：

import Vue from 'vue'
import Vuex from 'vuex'

import appUnreadInfo from './modules/unread-info'

Vue.use(Vuex)

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  modules: {
    appUnreadInfo
  },
  state: {},
  mutations: {},
  actions: {},
  getters: {}
})

使用 VueX

在未读信息页面进行引入和使用 VueX

import store from '@/store'

export default {
  methods: {
   toRoute(item) {
      if (item.isRead === 2) {
        read({
          messageId: item.messageId
        }).then(data => {
          uni.showToast({
            title: this.$t('str229'),
            icon: 'none'
          })
        })
        // 加载未读消息数目
        store.dispatch('appUnreadInfo/getUnReadCount')
      }
      uni.navigateTo({
        url: `/apps/me/message/me`
      })
    }
   }
  }

通过调用 read 接口处理未读消息后，我们使用 store.dispatch('appUnreadInfo/getUnReadCount') 来更新未读消息数量。 在“我的”页面，我们可以这样实现未读消息提示的更新：

import { mapGetters } from 'vuex'

onShow() {
   const unreadCount = this.$store.getters['appUnreadInfo/unreadCount']
      if (unreadCount > 1) {
        uni.setTabBarBadge({
          index: 1,
          text: unreadCount
        })
      } else {
        uni.removeTabBarBadge({
          index: 1
        })
      }
    }

调用 VueX 的 getters 方法来获取 unRedNum 数并使用 uniapp 的 setTabBarBadge 方法在底部标签栏进行未读消息提醒，最后我们在“首页”页面中：

  computed: {
    /**
     * 实时响应未读信息
     */
    ...mapGetters('appUnreadInfo', ['unreadCount'])
  },
   onLoad(query) {
    // 加载未读消息数目
    store.dispatch('appUnreadInfo/getUnReadCount').then(() => {
      const unreadCount = this.$store.getters['appUnreadInfo/unreadCount']
      if (unreadCount > 1) {
        uni.setTabBarBadge({
          index: 1,
          text: unreadCount
        })
      } else {
        uni.removeTabBarBadge({
          index: 1
        })
      }
    })
  },

进行实时响应，使当用户刚进入 app 时就能接收到未读消息提醒。

完

以上关于uniapp底部标签栏（Tab Bar）未读提示的实现思路的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。