25-动态设置Tabbar内容

uni.setTabBarItem(OBJECT)

动态设置tabBar的每一项内容,这些内容都是可以在pages.json中设置的配置项，感觉没什么用

uni.hideTabBar(OBJECT)和uni.showTabBar(OBJECT)做全屏效果时可以用显示和隐藏tabBar，视频中是在页面中的onLoad生命周期函数中写的

uni.setTabBarBadge(OBJECT)

为 tabBar 某一项的右上角添加文本。这个功能全平台支持 使用uni.removeTabBarBadge可以将这个效果移除

写一个点击事件，点击盒子移除效果

<template>
  <view>
    <view class="" @click="clickUser">用户信息</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    },
    methods: {
      clickUser(){
        uni.removeTabBarBadge({
          index:2
        })
      }
    },
    
    onLoad(){
      uni.setTabBarBadge({
        // 这是要显示数字的tabbar的索引,给哪一项加
        index:2,
        text:"3"
      })
    }
  }
</script>

<style lang="scss">

</style>
    

进入页面时的效果

点击盒子后移除的效果：

tabBar上显示和移除小红点

uni.showTabBarRedDot(OBJECT)显示小红点 uni.hideTabBarRedDot(OBJECT)隐藏小红点