当前位置:   article > 正文

微信小程序自定义TabBar,点击一次url跳转正确,icon没有选中状态_微信小程序settabbaritem修改跳转地址

微信小程序settabbaritem修改跳转地址

看了好多篇解决问题的方法,都没有思考症结的所在。

究其原因是wx.switchTab运行机制问题。

1.wx.switchTab微信小程序中的一个页面跳转方法,通常用于切换到底部 TabBar 中的某个页面。它有以下特点:

只能跳转到 TabBar 页面wx.switchTab 用于跳转到底部 TabBar 导航栏中的某个页面,因此只能用于跳转到在 app.json 中配置的 TabBar 页面。一般用于实现底部导航切换功能。

wx.switchTab()

通常情况下,当用户使用 wx.switchTab 方法切换到底部 TabBar 导航栏中的其他页面时,底部 TabBar 组件会重新加载并显示相应的页面,这会导致 TabBar 组件的状态被重置。

底部 TabBar 组件通常会在每次页面切换时重新渲染,因此页面切换后会重置 TabBar 的状态和内容。这包括重新高亮选定的 Tab,更新 TabBar 上的图标或文本等。

2.了解了这一点之后,对症下药,定义一个全局变量或者 wx.setStorageSync方法,两者皆可。

其目的是为了当前索引得以在重置之后保存。

  1. custom-tab-bar
  2. import handleList from './data';
  3. const app = getApp();
  4. const getDefaultData = () => ({
  5. active: 0,
  6. list: []
  7. });
  8. Component({
  9. data: getDefaultData(),
  10. methods: {
  11. onChange(event) {
  12. const curIndex = event.detail.value;
  13. //这一步 用 wx.setStorageSync('currentIndex', currentIndex);也可以
  14. app.globalData.currentIndex= curIndex;
  15. wx.switchTab({
  16. url: `/${this.data.list[curIndex].url}`,
  17. });
  18. },
  19. },
  20. ready: function () {
  21. this.setData({
  22. active: app.globalData.currentIndex,
  23. list: handleList(app.globalData.currentIndex)
  24. })
  25. }
  26. });
  27. app.js
  28. App({
  29. globalData: {
  30. currentIndex: 0, // 初始状态为未登录
  31. },
  32. });

到此问题得以解决。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/89974
推荐阅读