Hello, I'm front Countdown, a Buddhist code monster working in Mojo, and if you like my article 📚, you can gather psychic powers for me ⭐(*°∀°) by clicking like. I wish you all an early fortune, good health and a safe life!Copy the code

preface

The project requirements are user exist two kinds of identities, ordinary users and the teacher, then according to the different status to show different tabBar menu, looked at the official documentation, difficulty is not great, but because of I use is the framework of Taro, tried a few times with the method of the official document wxApi impassability gave up, to write JS general solution, But the configuration aspect still has to follow the applets documentation.

Make effect:

instructions

This article is the Taro version, non-native, ideas for reference, after all, JS is interchangeable.

1. Configure information

  • The tabBar TAB in app.json specifies the Custom field, and the rest of the tabbar-related configuration is complete.
  • UsingComponents must be declared in the JSON TAB page, and can be enabled globally in app.json.

Taro does not have a single json directory, so only the first one will work

  tabBar: {
      custom: true.list: [{
        'pagePath': 'pages/home/index'.'text': 'home',},... ] },Copy the code

2. Add the tabBar code file

  • Add the entry file to the code root directory:
  custom-tab-bar/index.js
Copy the code

Components written in this file are displayed as custom Tabbars

The main steps

  1. Write a component in custom-tab-bar/index.js (this component is the new tabBar component)
  2. For example, there are 4 menus on the client side and 3 menus on the master side. Here, I have made identification type to distinguish identities
const nav = [{
      'url': '/pages/home/index'.'type': 1.'text': 'home'}, {'url': '/pages/user1/index'.'type': 1.'text': 'User Menu 1'
    }, {
      'url': '/pages/user2/index'.'type': 1.'text': 'User Menu 2'
    }, {
      'url': '/pages/user3/index'.'type': 1.'text': 'User Menu 3'
    }, {
      'url': '/pages/masterhome/index'.'type': 2.'text': Master home page
    }, {
      'url': '/pages/master1/index'.'type': 2.'text': 'Master Menu 1'
    }, {
      'url': '/pages/master2/index'.'type': 2.'text': 'Master menu 2'
    }]
Copy the code
  1. After logging in to retrieve the identity information returned by the backend, we define a variable isMaster to store it
  2. Then go to custom-tab-bar/index.js and get the isMaster, according to the isMaster process to get the navList to render the tabBar list
  const navList = isMaster ? nav.filter(item= > item.type === 2) : data.filter(item= > item.type === 1);
Copy the code
  1. TabBar is displayed when isMaster is true

  1. TabBar is displayed when isMaster is false

Remember to point a thumbs-up, and jun refueling