问题:tabbar
图标切换 要点击两次才能有选中状态
原因:没有拷贝组件函数
官网中所给出的自定义组件地址:here
在 app.json
中添加:
"tabBar": {
"custom": true,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/component/index",
"text": "组件"
}, {
"pagePath": "page/API/index",
"text": "接口"
}]
},
"usingComponents": {}
然后,在list
中至少关联两个页面。在官方示例案例 代码中获取到custom-tab-bar
以及对应的image
文件,在代码根目录下添加入口文件:
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
然后,简单修改custom-tab-bar/index.js
中的list
,使得和app.json
中定义的一致。然后自己就以为没有了,就会出现标题所示的问题,即:需要点击两次才会切换图标为选中状态。
解决:
需要在每一个关联tabbar
的页面的js
文件中添加下面的代码:
Component({
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
}
})
其中selected: 0
的值需要自己根据顺序指定值。然后,就不会有上述现象了。
当然,此事的页面中默认就是组件,如果需要这种方式使用,需要将每个page
页对应的js
文件的App
删除,然后只保留Component
部分,然后如果需要点击函数,就需要采用组件的方式,如:
Component({
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
},
methods: {
weizu: function(){
console.log(123)
}
}
})
在对应的wxml
文件中进行事件绑定即可:
<view class="card-range" bindtap="weizu">打卡排行榜</view>
测试发现,其实这种方式不好,存在闪烁现象。
由于之前做过微信小程序的tabbar
使用,记得有简单的方式,就考虑将custom-tab-bar
文件删除掉,然后将 app.json
中的custom
修改下为false
:
"tabBar": {
"custom": false,
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#000000",
"list": [{
"pagePath": "page/component/index",
"text": "组件"
}, {
"pagePath": "page/API/index",
"text": "接口"
}]
}
果然可以。就不再考虑使用自定义组件的方式来做tabbar
了。