Mini Program_Dynamic setting of tabBar theme skin

序：Need to dynamically set some background of the page、按钮状态、文字的颜色,图片、图标等等,包括tabBaricon and text color,Toggle button unified settings,This is easier to implement on the page,按理说tabBarThe settings are also simple,确实是！as long as you can calltabBarThe method of the component can switch the theme skin,The key is whether you will use the applet method.

1、tabBar自定义

配置自定义tabBar的方法可以参考官方文档,This doesn't bother me anymore,Get familiar with this first,Speaking of other;

2、Dynamically set the background、按钮状态、文字的颜色,图片、图标等等

前提工作：主题样式文件 common/theme.wxssand theme images folder/static/image/v1,/static/image/v2,如下图：

Replace styles in each desired theme xxx.wxss  The header introduces the theme file

@import "./../common/theme.wxss";

1）首先在 app.js Set a theme parameter in the global file 

globalData: {
  theme: 1,  // 主题
}

2）Then set parameters on other pages

data: {
  theme: 1,
},
onShow(){
  let that = this;
  that.setData({
    theme: app.globalData.theme,
  })
},

.wxml

<view class="limit_width theme_v{
   {theme}}"> ... </view>

3）Last action on the settings page

setup.wxml

<view class="limit_width theme_v{
   {theme}}">
  <view class="item">
    <view class="theme_tle">设置主题：</view>
    <view class="flex">
      <view bindtap="themeTab" class="theme_tab {
   {theme==1?'tab_bg_br':''}}" data-num="1">新绿(默认)</view>
      <view bindtap="themeTab" class="theme_tab {
   {theme==2?'tab_bg_br':''}}" data-num="2">海蓝</view>
    </view>
  </view>
</view>

setup.js

data: {
  theme: 1,
},
onLoad(options) {
  this.setData({
    theme: app.globalData.theme,
  })
},
// 主题切换（逸曦穆泽）
themeTab(e){
  let num = parseInt(e.currentTarget.dataset.num);
  this.setData({theme: num});
  app.globalData.theme = num;   // 全局更新
  this.getTabBar().watchBack(); // （逸曦穆泽）调用自定义 tabbar 的方法
  // 保存到本地
  wx.setStorage({
    key: "themeSkin",
    data: num,
  })
},

3、动态设置tabBar

// （逸曦穆泽）custom-tab-bar/index.js
const app = getApp();
let themeColor = ["#515151","#515151","#000"];
let themeActiveColor = ["#94AC56","#94AC56","#185F95"];
Component({
  data: {
    theme: 1,
    selected: 1,
    color: "#515151",
    selectedColor: "#94AC56",
    list: [{
      "pagePath": "/pages/home/home",
      "iconPath": "/static/image/nav_home.png",
      "selectedIconPath": "/static/image/v1/nav_home.png",
      "text": "首页"
    },{
      "pagePath": "/pages/setup/setup",
      "iconPath": "/static/image/nav_setup.png",
      "selectedIconPath": "/static/image/v1/nav_setup.png",
      "text": "设置"
    }],
  },
  methods: {
    // （逸曦穆泽）监听并回调
    watchBack() {
      var that = this;
      let num = app.globalData.theme;
      let listUpd = [{
        "pagePath": "/pages/home/home",
        "iconPath": "/static/image/nav_home.png",
        "selectedIconPath": "/static/image/v"+num+"/nav_home.png",
        "text": "首页"
      },{
        "pagePath": "/pages/setup/setup",
        "iconPath": "/static/image/nav_setup.png",
        "selectedIconPath": "/static/image/v"+num+"/nav_setup.png",
        "text": "设置"
      }];
      that.setData({
        theme: num,
        color: themeColor[num],
        selectedColor: themeActiveColor[num],
        list: listUpd,
      })
    },
    switchTab(e){
      var that = this;
      const data = e.currentTarget.dataset;
      const url = data.url;
      wx.switchTab({ url });
      that.setData({
        selected: data.index
      });
    }
  },
})

.wxml

<view class="tabbar theme_v{
   {theme}}"> ... </view>

to put it simply,其实也很简单,Just use the class-level styles from the theme style file,js 控制了 theme 参数;

难点在于 tabbar 的切换,怎么调用？肯定是调用 custom-tab-bar/index.js 下的方法,Get the global theme parameter settings into it;还有一个Topic echo的问题,可以自己去实现,这个也很简单,当然,Leave a message below if you really need it.

效果图就不贴了,This is something that involves companies and customers！

参考文章：

WeChat applet dynamics设置tab-bar_Eating hot pot tonight yay blog-CSDN博客_WeChat applet dynamicstabbar