问题描述
开发小程序时,使用 TDesign 组件库进行开发,使用 t-tab-bar
来作为自定义的底部导航栏。
正常不跳转的情况下,使用该组件没有问题。
当加入了跳转逻辑后,就会导致组件混乱,点第一次跳转过去,但菜单没有被选中。第二次再次点击才会成为选中状态。
使用的跳转方式是:wx.switchTab
<!-- 导航 -->
<t-tab-bar value="{{selected}}" bindchange="onTabsChange" split="{{false}}">
<t-tab-bar-item wx:for="{{list}}" wx:key="index" icon="{{item.icon}}" value="{{item.key}}">
{{item.text}}
</t-tab-bar-item>
</t-tab-bar>
Component({
data: {
selected: "home",
list: [{
"pagePath": "/pages/index/index",
"icon": "app",
"key": "index",
"text": "首页"
}, {
"pagePath": "/pages/home/home",
"icon": "home",
"key": "home",
"text": "主页"
}]
},
methods: {
onTabsChange(e) {
let val = e.detail.value;
let data = this.data.list.filter(x => x.key === val)[0];
if(data){
wx.switchTab({
url: data.pagePath
})
<pre><code> this.setData({
selected: val
});
}
},
} })
问题解析
该问题的原因是因为微信小程序在进行跳转时,会刷新一下页面。
刷新页面后,设置的 selected 就失效了,重新进入就会设置新的。
第二次再次点击,就不会再跳转,也就不会再刷新页面了。
解决思路
选中的值放在全局,页面就绪后从全局获取这个值。
在选中后就将全局的值更新掉。
具体做法
app.js 做如下改动,添加 globalData
import gulpError from './utils/gulpError';
App({
globalData: {
selected: "home"
},
onShow() {
if (gulpError !== 'gulpErrorPlaceHolder') {
wx.redirectTo({
url: <code>/pages/gulp-error/index?gulpError=${gulpError}
,
});
}
},
});
自定义的底部导航栏 js 文件中做如下改造
Component({
data: {
selected: getApp().globalData.selected,
list: [{
"pagePath": "/pages/index/index",
"icon": "app",
"key": "index",
"text": "首页"
}, {
"pagePath": "/pages/home/home",
"icon": "home",
"key": "home",
"text": "主页"
}]
},
/**</p>
<ul>
<li>生命周期函数--监听页面加载
*/
ready() {
let app = getApp();
this.setData({
selected: app.globalData.selected
})
},
attached() {
},
methods: {
onTabsChange(e) {
let app = getApp();
let val = e.detail.value;
app.globalData.selected = val;
let data = this.data.list.filter(x => x.key === val)[0];
console.log("app.globalData.selected", app.globalData.selected)
if(data){
wx.switchTab({
url: data.pagePath
})
}</li>
</ul>
<pre><code>}
} })
做法很糙,刚开始学习小程序,有兴趣的可以一块学习!!
最终效果,已经可以正常切换了。看官网说的,首次点击闪烁问题好像没办法解决。如果有解决方案,欢迎留言!
评论区