去掉系統(tǒng)生成的tabBar

在 app.json 中的 tabBar 項(xiàng)指定 custom 字段，同時(shí)其余 tabBar 相關(guān)配置也補(bǔ)充完整。

"tabBar": {
    "custom": true,
    "color": "#567788",
    "selectedColor": "#f96677",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首頁(yè)",
        "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": "活動(dòng)",
        "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"
      }
    ]
  },

在單個(gè)頁(yè)面中添加自定義導(dǎo)航欄

wxml

<view class="tab-bar">
  <navigator url="/pages/index/index" open-type="switchTab">
    <view>
      <image src="/images/icon0_1.png"></image>
    </view>
    <view>首頁(yè)</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>活動(dòng)</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;
}

用自定義組件實(shí)現(xiàn)自定義tabBar

根目錄創(chuàng)建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": "首頁(yè)",
          "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": "活動(dòng)",
          "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: {
  }
})

在各個(gè)tabBar頁(yè)面的wxml中引入
*.json

{
  "usingComponents": {
    "tab-bar":"/components/tabBar/tabBar"
  },
  "navigationBarBackgroundColor": "#c8e44a",
  "navigationBarTitleText": "首頁(yè)"
}

*.wxml

<view class="top">
  首頁(yè)
</view>
<tab-bar cur="{{0}}"></tab-bar>

自定義tabBar在初次渲染時(shí)會(huì)有閃動(dòng)，可以把所有tabBar頁(yè)面做成一個(gè)頁(yè)面，而所謂的頁(yè)面只是不同組件的切換