In the process of developing applets, we will encounter permission login problems. Different roles will display different tabbars in the bottom navigation bar after login. I have seen a lot of blogs on the Internet, more or less there will be some pitfalls, and problems will be encountered. Today's blog can be solved in one go.
understand the concept
Instructions
Declare the custom field in app.json as true
“custom”: true
"tabBar": {
"custom": true,
"selectedColor": "#3161ff",
"list": [
{
"pagePath": "pages/index/index",
"text": "检查",
"iconPath": "./assets/tabbar/check.png",
"selectedIconPath": "./assets/tabbar/check_select.jpg"
},
{
"pagePath": "pages/approval/index",
"text": "审批",
"iconPath": "./assets/tabbar/approval.png",
"selectedIconPath": "./assets/tabbar/approval_select.png"
},
{
"pagePath": "pages/mine/index",
"text": "我的",
"iconPath": "./assets/tabbar/me.png",
"selectedIconPath": "./assets/tabbar/me_select.png"
}
]
},
Add the entry file to the root directory
Create a new folder in the root directory, named custom-tab-bar (the name must not be changed)
Right-click on the custom-tab-bar folder, create a new Component, the name is index (this cannot be changed, it is all official requirements, it cannot be displayed after changing)
Write code
custom-tab-bar/index.wxml
<!--custom-tab-bar/index.wxml-->
<view class="tab-bar">
<view class="tab-bar-border"></view>
<view wx:for="{
{selectList}}" wx:key="index" class="tab-bar-item" data-path="{
{item.pagePath}}" data-selected="{
{item.selected}}" bindtap="switchTab">
<image class="cover-image" src="{
{selected === item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<view class="cover-view" style="color: {
{selected === item.selected ? selectedColor : color}}">{
{item.text}}</view>
</view>
</view>
custom-tab-bar/index.wxss
/* custom-tab-bar/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;
}
custom-tab-bar/index.js
// custom-tab-bar/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
selectedColor: "#3161ff",
allList: [
[{
"pagePath": "/pages/index/index",
"text": "检查",
"iconPath": "../assets/tabbar/check.png",
"selectedIconPath": "../assets/tabbar/check_select.jpg",
"selected": "index"
},
{
"pagePath": "/pages/mine/index",
"text": "我的",
"iconPath": "../assets/tabbar/me.png",
"selectedIconPath": "../assets/tabbar/me_select.png",
"selected": "mine"
}
],
[{
"pagePath": "/pages/index/index",
"text": "检查",
"iconPath": "../assets/tabbar/check.png",
"selectedIconPath": "../assets/tabbar/check_select.jpg",
"selected": "index"
},
{
"pagePath": "/pages/approval/index",
"text": "审批",
"iconPath": "../assets/tabbar/approval.png",
"selectedIconPath": "../assets/tabbar/approval_select.png",
"selected": "approval"
},
{
"pagePath": "/pages/mine/index",
"text": "我的",
"iconPath": "../assets/tabbar/me.png",
"selectedIconPath": "../assets/tabbar/me_select.png",
"selected": "mine"
}
]
],
selectList: []
},
/**
* 生命周期方法
*/
attached() {
this.setData({
selectList: this.data.allList[1]
})
},
/**
* 组件的方法列表
*/
methods: {
switchTab(e) {
// console.log(e.currentTarget.dataset);
let path = e.currentTarget.dataset.path;
let selected = e.currentTarget.dataset.selected
// console.log(e.currentTarget.dataset.selected);
wx.switchTab({
url: path,
})
}
}
})
In the onShow method in the js file of each Page, add the following code
pages\approval\index.js
onShow() {
if(typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: "approval"
})
}
},
and so on
pages\index\index.js
onShow() {
if(typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: "index"
})
}
}
pages\mine\index.js
onShow() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: "mine"
})
}
},
The value of selected here corresponds to the selected field in the allLIst array, whichever one is selected will realize the color change and switch.
explain
What we are doing here is customizing the navigation bar, so it is displayed in custom-tab-bar/index.wxml.
The for loop is the selected array, and the image and text of the array are rendered
Switch between different tabbars through the selectList: this.data.allList[1]/selectList: this.data.allList[0] selected in the attachec life cycle in custom-tab-bar/index.js
The selected field of the selected field, which one is selected, will realize the color change and switch.
explain
What we are doing here is customizing the navigation bar, so it is displayed in custom-tab-bar/index.wxml.
The for loop is the selected array, and the image and text of the array are rendered
Switch between different tabbars through the selectList: this.data.allList[1]/selectList: this.data.allList[0] selected in the attachec life cycle in custom-tab-bar/index.js
Because this is a small demo that hasn’t done character information yet, you can judge the obtained character id when you actually do development, and judge which list to render