Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how WeChat Mini Programs switches different TabBar according to different users. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Existing requirements:

Mini Program users have three identities (public, operation and maintenance personnel, leaders) and display different tabbar according to different user identities.

As we all know, there are only 2-5 list in "tabBar" in WeChat Mini Programs's global file app.json. If you want to realize 3 tabbar, you must reuse tabbar. All three identities require a personal center, and the rest is a long list (two). There are just five forms and charts. Cut the crap and code.

1 Global .app.json

The sustom in tabbar should be set to true

"custom": true, {"pages": [xxxxxx:xxxxxx], "window": {xxxxxxxxx}, "tabBar": {"custom": true, "color": "# 7A7E83", "selectedColor": "# d81e06", "borderStyle": "black", "backgroundColor": "# ffffff", "list": [{"pagePath": "pages/Users/myrepaire/myrepaire" "text": "I want to repair", "iconPath": "/ images/tabbar/weixiu1.png", "selectedIconPath": "/ images/tabbar/weixiu2.png"}, {"pagePath": "pages/Users/myMalfunction/myMalfunction", "text": "my fault", "iconPath": "/ images/tabbar/myweixiu1.png" "selectedIconPath": "/ images/tabbar/myweixiu2.png"}, {"pagePath": "pages/logs/logs", "text": "personal Center", "iconPath": "/ images/tabbar/user1.png", "selectedIconPath": "/ images/tabbar/user2.png"}, {"pagePath": "pages/weixiu/myweixiu/myweixiu" "text": "my maintenance", "iconPath": "/ images/tabbar/myweixiu1.png", "selectedIconPath": "/ images/tabbar/myweixiu1.png"}, {"pagePath": "pages/charts/charts", "text": "failure report", "iconPath": "/ images/tabbar/chart1.png" "selectedIconPath": "/ images/tabbar/chart2.png"}]}, "sitemapLocation": "sitemap.json"}

You can see that there are five different tabbar paths in the global app.json

two。 Custom custom-tab-bar

(see the official documentation of Wechat for details)

Index.js

Component ({data: {selected: 0, color: "# 000000", roleId:', selectedColor: "# 1396DB", allList: [{list1: [{pagePath: "/ pages/Users/myrepaire/myrepaire", iconPath: "/ images/tabbar/weixiu1.png", selectedIconPath: "/ images/tabbar/weixiu2.png", text: "I want to report for repair") {pagePath: "/ pages/Users/myMalfunction/myMalfunction", iconPath: "/ images/tabbar/myweixiu1.png", selectedIconPath: "/ images/tabbar/myweixiu2.png", text: "my failure"}, {pagePath: "/ pages/logs/logs", text: "personal Center", iconPath: "/ images/tabbar/user1.png" SelectedIconPath: "/ images/tabbar/user2.png"}], list2: [{pagePath: "/ pages/weixiu/myweixiu/myweixiu", iconPath: "/ images/tabbar/weixiu1.png", selectedIconPath: "/ images/tabbar/weixiu2.png", text: "I want to repair"}, {pagePath: "/ pages/Users/myMalfunction/myMalfunction" IconPath: "/ images/tabbar/myweixiu1.png", selectedIconPath: "/ images/tabbar/myweixiu2.png", text: "my maintenance"}, {pagePath: "/ pages/logs/logs", text: "personal Center", iconPath: "/ images/tabbar/user1.png", selectedIconPath: "/ images/tabbar/user2.png"}] List3: [{pagePath: "/ pages/Users/myrepaire/myrepaire", iconPath: "/ images/tabbar/weixiu1.png", selectedIconPath: "/ images/tabbar/weixiu2.png", text: "I want to repair"}, {pagePath: "/ pages/charts/charts", iconPath: "/ images/tabbar/chart1.png" SelectedIconPath: "/ images/tabbar/chart2.png", text: "failure report"}, {pagePath: "/ pages/logs/logs", text: "personal Center", iconPath: "/ images/tabbar/user1.png", selectedIconPath: "/ images/tabbar/user2.png"}}], list: []} Attached () {const roleId= wx.getStorageSync ('statu') if (roleId== 20) {this.setData ({list: this.data.allList [0] .List1})} else if (roleId==5) {this.setData ({list: this.data.allList [0]. List3})} else if (roleId==102) {this.setData ({list: this) .data.allList [0] .list2})}} Methods: {switchTab (e) {const data = e.currentTarget.dataset const url = data.path wx.switchTab ({url}) this.setData ({selected: data.index})},})

Analysis:

First of all, Mini Program tabbar only recognizes what's in list.

First define an array of list and allList in data, define the list of the triple identity user as list1,list2,list3, and put it in allList.

Const roleId = wx.getStorageSync ('statu')

Get the user information and store it in the cache, and determine the identity according to the different and roleId.

This.setData ({list: this.data.allList [0] .list2})

Assign the subarray in allList to the `list`` recognized by the system by default according to the identity

The role of switchTab in switching tabbar subscript according to different paths

SwitchTab (e) {const data = e.currentTarget.dataset const url = data.path wx.switchTab ({url}) this.setData ({selected: data.index})}

Index.json

{"usingComponents": {}}

Index.wxml

{{item.text}}

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: 44rpx; height: 44rpx;} .tab-bar-item. Cover-view {margin-top: 8rpx; font-size: 24rpx;}

Finally, set the onshow:function () {} of xxx.js under the path file of pagePath in tabbar.

In other words, the onshow:function () {} in the xx.js corresponding to the page that uses the tabbar component should be set as follows

Otherwise, the tabbar display will be out of sync with the click.

/ * Lifecycle function-the listening page displays * / onShow: function () {if (typeof this.getTabBar = 'function' & & this.getTabBar ()) {this.getTabBar (). SetData ({selected: 0})}}, / / selected: 0 is the selected tabbar subscript, and the tabbar subscript results are displayed according to different pages.

1. Ordinary user

two。 Operation and maintenance personnel

3. Leader

You can see that different tabbar has been successfully switched according to the roleId in the user's information.

These are all the contents of the article "how WeChat Mini Programs switches different TabBar according to different users". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.