[TabBar 标签栏]中 wx.switchTab({url}) 与 that.setData({ value: value, }); 共存会导致显示异常

[ryiot]

tdesign-miniprogram 版本

1.2.3

重现链接

No response

重现步骤

Component({
data: {
value: 'home',
list: [
{ value: 'home', label: '首页', icon: 'home' },
{ value: 'family', label: '家庭', icon: 'app' },
{ value: 'me', label: '我的', icon: 'user' },
],
},
methods: {
onChange(e) {
let that = this;
const value = e.detail.value;
that.setData({
value: value,
});
const url = '/pages/' + that.data.value + '/index';
wx.switchTab({url})
},
},
});

{{item.label}}

{
"component": true,
"usingComponents": {
"t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
"t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"
}
}

期望结果

实际结果

基础库版本

2.19.6

补充说明

No response

[github-actions]

👋 @ryiot，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[ryiot]

[betavs]

看看是否有报错信息

wx.switchTab({
  url,
  complete: (res) => {
    console.log(res);
  },
});

[ryiot]

查看是否有报错信息

wx.switchTab({
  url,
  complete: (res) => {
    console.log(res);
  },
});

[ryiot]

看看是否有报错信息

wx.switchTab({
  url,
  complete: (res) => {
    console.log(res);
  },
});

无报错信息

[betavs]

自定义 tabBar

[Copy-Hao]

自定义 tabBar

我试过了用getTabBar()方法去setData还是不行，你可以拉下我的代码去试一下 git clone https://github.com/Copy-Hao/TDesign-TabBar-Issue.git 另外 这个官方文档中的例子是没有这种问题的https://developers.weixin.qq.com/s/ouJiKgm67cHk
刚刚查了一下原因，不是框架问题，是wx小程序官方的自定义TarBar组件实例不是唯一的，他会在每一个新的page下生成一个新的Tarbar组件示例，导致每个页面中的value值都是默认值value="label_1"，因此解决方案是在app.js中的globalData中设置一个value变量

  globalData: {
    userInfo: null,
    value: "label_1"
  }

在onchange方法中去更新globalData中的value值

    onChange(e) {
      const data = e.detail
//页面切换 wx.switchTab({ url })
……
      app.globalData.value = data.value
    },

在自定义tarbar中的attach生命周期中执行

  attached: function () {
    this.setData({
      selected: app.globalData.selected
    })
  },

更新后的demo

[ryiot]

这种方式也可以解决问题