Applet custom native bottom navigation

design sketch

app.json File add navigation  

"custom": true, Open custom navigation

  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "rgba(0,0,0,0)",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": " home page "
      },
      {
        "pagePath": "pages/page1/page1",
        "text": "page1"
      },
      {
        "pagePath": "pages/page2/page2",
        "text": "page2"
      },
      {
        "pagePath": "pages/page3/page3",
        "text": "page3"
      },
      {
        "pagePath": "pages/page4/page4",
        "text": "page4"
      }
    ]
  },

stay app.json Create a folder with the same level directory custom-tab-bar （ Folder location and name must be by custom-tab-bar ）

Create under folder index.js index.json index.wxml index.wxss Four files The content is applet   Custom component content   My project structure   image Inside the folder are the icons used

 index.wxml file

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

index.json file

{
  "component": true
}

index.wxss file

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-list {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.tab-bar-item {
  position: relative;
}

.tab-bar-item-image {
  display: block;
  margin: 0 auto;
  width: 44rpx;
  height: auto;
  padding-top: 16rpx;
}

.tab-bar-item-text {
  padding-top: 5rpx;
  padding-bottom: 5rpx;
  text-align: center;
  font-size: 20rpx;
}

.tab-bar-item:nth-child(3) .tab-bar-item-image {
  position: relative;
  top: -44rpx;
  left: 3rpx;
  transform: scale(2);
}

.tab-bar-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

index.js file

Component({
  data: {
    selected: 0,
    color: "#576271",
    selectedColor: "#FF3800",
//  The format and app.json Of tabBar Format corresponding 
    list: [{
      pagePath: "/pages/index/index",
      iconPath: "./image/t_01.png",
      selectedIconPath: "./image/t_01_active.png",
      text: " home page "
    }, {
      pagePath: "/pages/page1/page1",
      iconPath: "./image/t_02.png",
      selectedIconPath: "./image/t_02_active.png",
      text: "page1"
    }, {
      pagePath: "/pages/page2/page2",
      iconPath: "./image/t_03.png",
      selectedIconPath: "./image/t_03.png",
      text: "page2"
    }, {
      pagePath: "/pages/page3/page3",
      iconPath: "./image/t_04.png",
      selectedIconPath: "./image/t_04_active.png",
      text: "page3"
    }, {
      pagePath: "/pages/page4/page4",
      iconPath: "./image/t_05.png",
      selectedIconPath: "./image/t_05_active.png",
      text: "page4"
    }]
  },
  attached() {},
  methods: {
    switchTab({
      currentTarget
    } = e) {
      const data = currentTarget.dataset
      const url = data.path
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    }
  }
})

After the above is written Navigate to the corresponding page Add the following code

onShow() {
// Mark the selected icon corresponding to the current page 
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0 // This page corresponds to the subscript of custom bottom navigation 
      })
    }
},

demo download