微信小程序自定义tabBar(超详细简单以及tabBar选中效果不改变解决办法)

刺骨的言语ヽ痛彻心扉 2022-11-28 00:43 550阅读 0赞

### 我们可以先去了解一下官方文档: [https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html][https_developers.weixin.qq.com_miniprogram_dev_framework_ability_custom-tabbar.html] ###

### 老规矩先看一下效果图: ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

### 项目结构: ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

### custom-tab-bar/index.wxml ###

<cover-view class="tab-bar">
      <cover-view class="tab-bar-border"></cover-view>
      <cover-view wx:for="{
       {list}}" wx:key="index" class="tab-bar-item" data-path="{
       {item.pagePath}}" data-index="{
       {index}}" bindtap="switchTab">
        <cover-image src="{
       {selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
        <cover-view style="color: {
       {selected === index ? selectedColor : color}}">{
       {item.text}}</cover-view>
      </cover-view>
    </cover-view>

### custom-tab-bar/index.wxss ###

.tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 48px;
      background: white;
      display: flex;
      padding-bottom: env(safe-area-inset-bottom);
    }
    
    .tab-bar-border {
      background-color: rgba(0, 0, 0, 0.33);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
    }
    
    .tab-bar-item {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    
    .tab-bar-item cover-image {
      width: 27px;
      height: 27px;
    }
    
    .tab-bar-item cover-view {
      font-size: 10px;
    }

### custom-tab-bar/index.js ###

Component({
      data: {
        selected: 0,
        color: "#999999",
        selectedColor: "#F7393F",
        list: [{
          pagePath: "/pages/index/index",
          iconPath: "/img/base/icon-home.png",
          selectedIconPath: "/img/base/icon-home-red.png",
          text: "首页"
        }, {
            pagePath: "/pages/my/my-chat/index",
            iconPath: "/img/base/icon-chat.png",
            selectedIconPath: "/img/base/icon-chat-red.png",
          text: "聊天"
          }, {
            pagePath: "/pages/live-streaming/index",
            iconPath: "/img/base/icon-live-streaming.png",
            selectedIconPath: "/img/base/icon-live-streaming-red.png",
            text: "直播"
          }, {
            pagePath: "/pages/my/my-shopping-trolley/index",
            iconPath: "/img/base/icon-shopping-trolley.png",
            selectedIconPath: "/img/base/icon-shopping-trolley-red.png",
            text: "购物车"
          }, {
            pagePath: "/pages/my/my-personal-center/index",
            iconPath: "/img/base/icon-user.png",
            selectedIconPath: "/img/base/icon-user-red.png",
            text: "个人中心"
          }]
      },
      attached() {
      },
      methods: {
        switchTab(e) {
          const data = e.currentTarget.dataset
          const url = data.path
          wx.switchTab({url})
          this.setData({
            selected: data.pages
          })
        }
      }
    })

### custom-tab-bar/index.json ###

{
      "component": true
    }

以上就是所以自定义tabBar代码

接下来看看怎么引入:

全局配置app.json

"tabBar": {
        "custom": true,
        "color": "#999999",
        "selectedColor": "#F7393F",
        "borderStyle": "black",
        "list": [
          {
            "pagePath": "pages/index/index",
            "iconPath": "img/base/icon-home.png",
            "selectedIconPath": "img/base/icon-home-red.png",
            "text": "首页"
          },
          {
            "pagePath": "pages/my/my-chat/index",
            "iconPath": "img/base/icon-chat.png",
            "selectedIconPath": "img/base/icon-chat-red.png",
            "text": "聊天"
          },
          {
            "pagePath": "pages/live-streaming/index",
            "iconPath": "img/base/icon-live-streaming.png",
            "selectedIconPath": "img/base/icon-live-streaming-red.png",
            "text": "直播"
          },
          {
            "pagePath": "pages/my/my-shopping-trolley/index",
            "iconPath": "img/base/icon-shopping-trolley.png",
            "selectedIconPath": "img/base/icon-shopping-trolley-red.png",
            "text": "购物车"
          },
          {
            "pagePath": "pages/my/my-personal-center/index",
            "iconPath": "img/base/icon-user.png",
            "selectedIconPath": "img/base/icon-user-red.png",
            "text": "个人中心"
          }
        ]
      },

主要一行代码"custom": true,

点选选中效果不改变或者点击两次才改变解决办法:

在每个页面js中onShow方法里面加入

onShow: function() {
    
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
          this.getTabBar().setData({
            selected: 0  //这个数字是当前页面在tabBar中list数组的索引
          })
        }
    }

问题就解决了

如果对你有帮助,请关注一下博主的小程序支持一下, 在此谢谢了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2][]

[https_developers.weixin.qq.com_miniprogram_dev_framework_ability_custom-tabbar.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20221124/0e56d6293ac74f209f9def04a3161132.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: /images/20221124/b033ebb852554ac299105c3a100cddc4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2]: /images/20221124/f02ccee46bc14e148c6d6de41eda18c7.png