Small program custom bottom navigation custom-tab-bar complete implementation code with renderings

Dynamically set the navigation icon at the bottom according to the user identity

 Implementation steps:

The first step is to configure first: the custom of the tabBar in app.json is set to true, as shown in the figure: It should be noted here that the pages contained in the custom tabBar must also have the path of the list page here, and other fields can be not set

Relevant code:

 

{
  "pages": [
    "pages/msgList/msgList",
    "pages/index/index",
    "pages/login/login",
    "pages/user/user"
  ],
  "tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": ""
      },
      {
        "pagePath": "pages/msgList/msgList",
        "text": ""
      },
      {
        "pagePath": "pages/user/user",
        "text": ""
      }
    ]
  },
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "darkmode": true,
  "sitemapLocation": "sitemap.json",
  "useExtendedLib": {
    "weui": true
  }
}

The second step is to create components: Create a folder in the project and directory: custom-tab-bar, which contains the component files for custom bottom navigation:

 The complete sample code of the component is as follows:

index.js

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: []
  },
  attached() {

    getApp().getUserInfo().then(res => {
      let userIdentity = res.userIdentity;
      console.log('userIdentity', userIdentity)
      userIdentity =2
      let arr1 = [{
        pagePath: "/pages/index/index",
        iconPath: "/images/icons/home.png",
        selectedIconPath: "/images/icons/home2.png",
        text: "首页"
      }, {
        pagePath: "/pages/msgList/msgList",
        iconPath: "/images/icons/message.png",
        selectedIconPath: "/images/icons/message2.png",
        text: "消息"
      }, {
        pagePath: "/pages/user/user",
        iconPath: "/images/icons/mine.png",
        selectedIconPath: "/images/icons/mine2.png",
        text: "我的"
      }]
      let arr2 = [{
        pagePath: "/pages/index/index",
        iconPath: "/images/icons/home.png",
        selectedIconPath: "/images/icons/home2.png",
        text: "首页"
      }, {
        pagePath: "/pages/user/user",
        iconPath: "/images/icons/mine.png",
        selectedIconPath: "/images/icons/mine2.png",
        text: "我的"
      }]
      this.setData({
        list: userIdentity == 1 ? arr1 : arr2
      })
    })
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({
        url
      })
      this.setData({
        selected: data.index
      })
    }
  }
})

index.json

{
  "component": true
}

index.wxml

<!--miniprogram/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>

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;
}

Step 3 , use the component, write 0 in the onShow of the first tab page, and accumulate according to the subscript of the tabBar List.

  onShow: function () {
    if (typeof this.getTabBar === 'function' && this.getTabBar()) {
      console.log('2222222')
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

The above has completed the effect of dynamically setting the navigation icon at the bottom according to the user's identity. If you have any questions, you can leave a message in the comment area. If it is helpful to you, please like it~