侧边栏壁纸
博主头像
极客魔方博主等级

远方不远,就在脚下

  • 累计撰写 12 篇文章
  • 累计创建 27 个标签
  • 累计收到 4 条评论

目 录CONTENT

文章目录

小程序切换导航栏后菜单没有选中问题解决

Rubik
2023-08-19 / 0 评论 / 0 点赞 / 11 阅读 / 3031 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-08-19,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

问题描述

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

} })

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

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

0

评论区