微信小程序自定义tabBar

去掉系统生成的tabBar

在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

"tabBar": {
    "custom": true,
    "color": "#567788",
    "selectedColor": "#f96677",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/images/icon0_0.png",
        "selectedIconPath": "/images/icon0_1.png"
      },
      {
        "pagePath": "pages/shop/shop",
        "text": "商城",
        "iconPath": "/images/icon1_0.png",
        "selectedIconPath": "/images/icon1_1.png"
      },
      {
        "pagePath": "pages/promotion/promotion",
        "text": "活动",
        "iconPath": "/images/icon2_0.png",
        "selectedIconPath": "/images/icon2_1.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/images/icon3_0.png",
        "selectedIconPath": "/images/icon3_1.png"
      }
    ]
  },

在单个页面中添加自定义导航栏

wxml

<view class="tab-bar">
  <navigator url="/pages/index/index" open-type="switchTab">
    <view>
      <image src="/images/icon0_1.png"></image>
    </view>
    <view>首页</view>
  </navigator>
  <navigator url="/pages/shop/shop" open-type="switchTab">
    <view>
      <image src="/images/icon1_0.png"></image>
    </view>
    <view>商城2</view>
  </navigator>
  <navigator url="/pages/promotion/promotion" open-type="switchTab">
    <view>
      <image src="/images/icon2_0.png"></image>
    </view>
    <view>活动</view>
  </navigator>
  <navigator url="/pages/mine/mine" open-type="switchTab">
    <view>
      <image src="/images/icon3_0.png"></image>
    </view>
    <view>我的</view>
  </navigator>
</view>

wxss

.top {
  width: 100%;
  height: 300rpx;
  outline: 1px solid #000;
}
.tab-bar {
  position: fixed;
  display: flex;
  justify-content: space-around;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150rpx;
  background-color: #c8e44a;
}
.tab-bar image {
  width: 80rpx;
  height: 80rpx;
}

用自定义组件实现自定义tabBar

根目录创建components/tabBar文件夹，并新建Component
tabBar.wxml

<view class="tab-bar">
  <block wx:for="{{tabBar.list}}" wx:key="text">
    <navigator url="/{{item.pagePath}}" open-type="switchTab">
      <view>
        <image src="{{cur === index? item.selectedIconPath : item.iconPath}}" class="img"></image>
      </view>
      <view style="color:{{cur === index ? tabBar.selectedColor : tabBar.color}}">{{item.text}}</view>
    </navigator>
  </block>
</view>

tabBar.js

Component({
  properties: {
    cur: {
      type: Number
    }
  },
  data: {
    "tabBar": {
      "color": "#567788",
      "selectedColor": "#f96677",
      "list": [{
          "pagePath": "pages/index/index",
          "text": "首页",
          "iconPath": "/images/icon0_0.png",
          "selectedIconPath": "/images/icon0_1.png"
        },
        {
          "pagePath": "pages/shop/shop",
          "text": "商城",
          "iconPath": "/images/icon1_0.png",
          "selectedIconPath": "/images/icon1_1.png"
        },
        {
          "pagePath": "pages/promotion/promotion",
          "text": "活动",
          "iconPath": "/images/icon2_0.png",
          "selectedIconPath": "/images/icon2_1.png"
        },
        {
          "pagePath": "pages/mine/mine",
          "text": "我的",
          "iconPath": "/images/icon3_0.png",
          "selectedIconPath": "/images/icon3_1.png"
        }
      ]
    },
  },
  methods: {
  }
})

在各个tabBar页面的wxml中引入
*.json

{
  "usingComponents": {
    "tab-bar":"/components/tabBar/tabBar"
  },
  "navigationBarBackgroundColor": "#c8e44a",
  "navigationBarTitleText": "首页"
}

*.wxml

<view class="top">
  首页
</view>
<tab-bar cur="{{0}}"></tab-bar>

自定义tabBar在初次渲染时会有闪动，可以把所有tabBar页面做成一个页面，而所谓的页面只是不同组件的切换