微信小程序开发自定义tabBar_微信小程序 自定义tabbar

1.app.json配置tabBar，并且custom:true

        

2.与pages文件夹同级新建custom-tab-bar文件夹，名字一定不能错

        

3.

        custom-tab-bar/index.wxml

        注意路径：data-path="{{'/'+item.pagePath}}"，

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

    custom-tab-bar/index.js，这里配置上需要展示的tabBar页面

Component({
    data: {
        selected: "0",
        "color": "#000",
        "selectedColor": "#1296db",
        "list": [
            {
              "text": "首页",
              "pagePath": "pages/index/index",
              "iconPath": "../images/home.png",
              "selectedIconPath": "../images/home-fill.png"
            },
            {
              "text": "服务",
              "pagePath": "pages/serve/serve",
              "iconPath": "../images/serve.png",
              "selectedIconPath": "../images/serve-fill.png"
            },
            {
              "text": "购物",
              "pagePath": "pages/cart/cart",
              "iconPath": "../images/cart.png",
              "selectedIconPath": "../images/cart_fill.png"
            },
            {
              "text": "健康",
              "pagePath": "pages/health/health",
              "iconPath": "../images/health.png",
              "selectedIconPath": "../images/health-fill.png"
            },
            {
              "text": "我的",
              "pagePath": "pages/mine/mine",
              "iconPath": "../images/user.png",
              "selectedIconPath": "../images/user-fill.png"
            }
          ]
    },
    attached() {
    },
    methods: {
        switchTab(event) {
            // data为接受到的参数
            const data = event.currentTarget.dataset;
            console.log('data',data.index);
            // 取出参数中的path作为路由跳转的目标地址
            const url = data.path
            wx.switchTab({url})
            this.setData({
              selected: data.index
            })
            console.log('selected',this.data.selected);
        },
    }
  })

custom-tab-bar/index.json

{
  "component": true
}

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 image {
    width: 27px;
    height: 27px;
  }
  
  .tab-bar-item view {
    font-size: 10px;
  }

4.此时tabBar已经存在了，但是存在切换延迟问题，需要点击两次icon才能正确选中

解决方法：在跳转的页面的onShow生命周期里面加上，selected是custom-tab-bar里面当前设置选中下标的参数名，而值是对应tabbar数组里面对应的下标 ，相应的修改 selected的值

onShow(){
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 2,
        active: getApp().globalData.selected
      })
      console.log(this.getTabBar().__data__.selected)
      this.setData({
        active:this.getTabBar().__data__.selected
      })
    }
}

如果此时设置完，存在切换闪烁的问题，可以把custom-tab-ba/index.js中this.setData({selected: data.index})注释掉