Problem: The tabbaricon switch needs to be clicked twice to have the selected state.
Reason: There is no copy component function
Custom assembly official website address given: here Wallpaper
in app.jsonadded:
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/component/index",
"text": "组件"
}, {
"pagePath": "page/API/index",
"text": "接口"
}]
},
"usingComponents": {
}
Then, listassociate at least two pages in. Obtain the corresponding files in the official sample case code, custom-tab-barand imageadd the entry file in the code root directory:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
Then, simply modify the custom-tab-bar/index.jsin to listmake it app.jsonconsistent with the definition in. Then I thought it was gone, and the problem shown in the title would appear, that is, you need to click twice to switch the icon to the selected state.
solve:
You need to add the following code tabbarin the jsfile of each associated page :
Component({
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
}
})
Wherein the selected: 0values need to order according to their specified value. Then, there will be no such phenomenon.
Of course, the default page of this matter is the component. If you need to use it in this way, you need to delete pagethe jsfile corresponding to each page App, and then only keep Componentpart, and then if you need to click on the function, you need to use the component method, such as:
Component({
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
},
methods: {
weizu: function(){
console.log(123)
}
}
})
wxmlEvent binding can be done in the corresponding file:
<view class="card-range" bindtap="weizu">打卡排行榜</view>
The test found that this method is actually not good and there is flickering.
Since the micro-channel applet done before tabbaruse, remember there are simple ways to consider the custom-tab-bardeleted files, then app.jsonthe customnext revised to false:
"tabBar": {
"custom": false,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/component/index",
"text": "组件"
}, {
"pagePath": "page/API/index",
"text": "接口"
}]
}
Sure enough. No longer consider the way to use custom components to do tabbarit.