问题描述

开发小程序时，使用 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>}

} })

做法很糙，刚开始学习小程序，有兴趣的可以一块学习！！

最终效果，已经可以正常切换了。看官网说的，首次点击闪烁问题好像没办法解决。如果有解决方案，欢迎留言！