Problem description

   the original bottom navigation bar of wechat applet limits the number (3-5) and can not change the dynamic bottom navigation bar according to your unused users. It can not adapt to the situation that multiple users enter and display different bottom navigation bar functions from one applet. It can only adapt to the situation that multiple users use the same navigation bar, which is inconsistent with the design of our applet.
 
 

resolvent

  before looking at the solution, you need to learn the custom components of wechat applet.
   a solution is proposed here, as described below.
  because the native bottom navigation bar of wechat applet does not support dynamic change, you can only use the custom bottom navigation bar.
  wechat applets can use component templates, so the bottom navigation bar is encapsulated and integrated with a template, which increases the reusability of the bottom navigation bar code.
  then make several interfaces of the bottom navigation bar into the mode of wechat applet custom components, and add these page components and the bottom navigation bar components into one page. Users click different bottom navigation bars to display different components, which has achieved different effects for users with different categories.

   when logging in, identify the user's identity and make it enter different index interfaces (different user's index interface has different custom navigation bar data, which contains different custom components, and the display is different), so as to achieve different effects of navigation bars at the bottom of different users.
 
 

 
 

 
 

code implementation

Bottom navigation bar

This part of the code can be changed freely (I gave a simple bottom navigation bar template from ColorUI).

Let's first look at the wxml code in the bottom navigation bar.

<!-- Common menu template -->
<!-- tabbar.wxml -->
<template name="tabBar">
  <view class="cu-bar tabbar bg-black shadow foot"  >
    <view class="action" bindtap="NavChange" data-cur="{{item.currentUrl}}" wx:for="{{menus.list}}" wx:key="currentUrl">
      <view class='cuIcon-cu-image'>
        <image src="{{menus.activeUrl==item.currentUrl?item.checkedImgUrl:item.unCheckImgUrl}}"></image>
      </view>
      <view class="{{menus.activeUrl==item.currentUrl?'':'text-gray'}}" style="{{menus.activeUrl==item.currentUrl?'color:#1296DB;':''}}">{{item.title}}</view>
    </view>
  </view>
</template>

Let's take another look at the wxss code of the navigation bar at the bottom. This part needs to introduce the wxss code of ColorUI. Of course, you can also design and make it yourself.

/* tabbar.wxss */
/* wxss of ColorUI needs to be introduced */
@import "../../colorui/main.wxss";
@import "../../colorui/icon.wxss";

.mytmpcz-1 {
  border: 3px dashed orange;
}

Menu data in the bottom navigation bar

//Bottom navigation bar menu
var checkPersonnel = {//Inspector
  activeUrl: '/pages/checkPersonnel/check',//Navigation bar for initial selection
  list: [{
    currentUrl: "/pages/checkPersonnel/check",//Interface address
    unCheckImgUrl: "/images/check.png",//No icon selected
    checkedImgUrl: "/images/check_select.png",//Select Icon
    btnType: 0,//Number of messages
    title: "Check",//Navigation bar name of this item
  }, {
    currentUrl: "/pages/checkPersonnel/audit",
    unCheckImgUrl: "/images/audit.png",
    checkedImgUrl: "/images/audit_select.png",
    btnType: 0,
    title: "to examine"
  }, {
    currentUrl: "/pages/checkPersonnel/location",
    unCheckImgUrl: "/images/location.png",
    checkedImgUrl: "/images/location_select.png",
    btnType: 0,
    title: "position"
  }, {
    currentUrl: "/pages/checkPersonnel/my",
    unCheckImgUrl: "/images/my.png",
    checkedImgUrl: "/images/my_select.png",
    btnType: 0,
    title: "my"
  }]
}

var company = {//company
  activeUrl: '/company/abarbeitung',
  list: [{
    currentUrl: "/company/abarbeitung",
    unCheckImgUrl: "/images/abarbeitung.png",
    checkedImgUrl: "/images/abarbeitung_select.png",
    btnType: 0,
    title: "Rectification"
  }, {
    currentUrl: "/company/analyticsList",
    unCheckImgUrl: "/images/analytics.png",
    checkedImgUrl: "/images/analytics_select.png",
    btnType: 0,
    title: "Data analysis"
  }, {
    currentUrl: "/company/my",
    unCheckImgUrl: "/images/my.png",
    checkedImgUrl: "/images/my_select.png",
    btnType: 0,
    title: "my"
  }]
}

module.exports = {//Expose menu data
  checkPersonnel: checkPersonnel,
  company: company
}

 
 

 
 

Inspector

The wxml of the inspector interface. The four interfaces corresponding to the bottom navigation bar are all made in the form of user-defined components.

<!-- Inspector index Interface wxml -->
<!-- Template import -->
<import src="../../../miniprogram_npm/tabbar/tabbar.wxml" />

<!-- 4 The corresponding interfaces of the bottom navigation bar are introduced in the form of components -->
<audit id="audit" wx:if="{{PageCur=='/pages/checkPersonnel/audit'}}"></audit>
<check id="check" wx:if="{{PageCur=='/pages/checkPersonnel/check'}}"></check>
<location id="location" wx:if="{{PageCur=='/pages/checkPersonnel/location'}}"></location>
<my id="my" wx:if="{{PageCur=='/pages/checkPersonnel/my'}}"></my>

<!-- Template placement -->
<template is="tabBar" data="{{menus}}" />

js code.

// pages/checkPersonnel/index/index.js
var menus = require("../../../utils/menus.js");//Import bottom navigation bar data
Page({

  /**
   * Initial data of the page
   */
  data: {
    PageCur: '/pages/checkPersonnel/check'
  },

  /**
   * Life cycle function -- listening for page loading
   */
  onLoad: function (options) {
    this.setData({//Set navigation bar data at the bottom of the interface
      menus: menus.checkPersonnel,
      PageCur: '/pages/checkPersonnel/check'
    })
  },

  /* ColorUI Page Jump mode */
  NavChange(e) {
    var cur = e.currentTarget.dataset.cur;
    if(cur){
      this.setData({
        PageCur: cur,
        "menus.activeUrl": cur
      })
    }
  }
})

json code

{
  "usingComponents": {
    "audit": "/pages/checkPersonnel/audit/audit",
    "check": "/pages/checkPersonnel/check/check",
    "location": "/pages/checkPersonnel/location/location",
    "my": "/pages/checkPersonnel/my/my"
  }
}

The company interface is similar.
 
 

 
 

 
 

Existing problems

1. The solution is that when you click the bottom navigation bar to switch the page for the first time after entering the page, there is a flashing screen (the screen will flash once), which is due to the problem of native adaptation of wechat applet, and there will be no flashing screen in subsequent clicks. (no solution has been found at present)
2. Due to the development limitation of customized components of wechat applet, it is not as good as the normal interface. The existence of customized bottom navigation bar will lead to some methods that cannot be used or become more complex (drop-down bottom function, data transmission, etc.)