uniapp动态设置tabbar

在UniApp中，我们可以使用动态设置的方式来修改Tabbar的样式和内容。

一、修改Tabbar样式：
1. 在App.vue文件中，添加一个全局的tabbar样式变量，例如：

export default {
  globalData: {
    tabBarStyle: {
      backgroundColor: '#ffffff',
      color: '#000000',
      selectedColor: '#ff0000',
      borderStyle: 'white',
      list: [
        {
          pagePath: 'pages/index/index',
          text: '首页',
          iconPath: 'static/tabBar/home.png',
          selectedIconPath: 'static/tabBar/home_selected.png'
        },
        {
          pagePath: 'pages/category/category',
          text: '分类',
          iconPath: 'static/tabBar/category.png',
          selectedIconPath: 'static/tabBar/category_selected.png'
        },
        // 其他tabbar项...
      ]
    }
  }
}

2. 在页面的onLoad钩子函数中，动态修改tabbar样式：

onLoad() {
  this.globalData.tabBarStyle.backgroundColor = '#f5f5f5';
  this.globalData.tabBarStyle.color = '#666666';
  this.globalData.tabBarStyle.selectedColor = '#ff9900';
}

3. 修改完样式后，通过this.globalData.tabBarStyle.list属性可以获取到tabbar的列表数据，根据实际需要修改每个tabbar项的页面路径、文字、图标等。

二、修改Tabbar内容：
1. 在页面的onLoad钩子函数中，动态修改tabbar的内容：

onLoad() {
  this.globalData.tabBarStyle.list[0].text = 'New首页';
  this.globalData.tabBarStyle.list[0].iconPath = 'static/tabBar/home_new.png';
  this.globalData.tabBarStyle.list[0].selectedIconPath = 'static/tabBar/home_selected_new.png';
}

2. 修改完内容后，可以通过this.globalData.tabBarStyle.list属性获取到每个tabbar项的具体内容，并进行修改。

通过以上方式，我们可以实现在UniApp中动态设置Tabbar的样式和内容。如果需要实时更新Tabbar的样式和内容，可以通过监听数据变化，动态更新页面显示。