小程序中使用自定义tabbar在switchTab后需要点击2次才能触发active样式 uni-app

小程序中使用自定义tabbar在switchTab后需要点击2次才能触发active样式 uni-app

7 回复

你用的这个自定义tabbar 是用的插件吗？还是自己做的组件？能发一个复现项目吗？

更多关于小程序中使用自定义tabbar在switchTab后需要点击2次才能触发active样式 uni-app的实战教程也可以访问 https://www.itying.com/category-93-b0.html


用的组件库，ant-design-mini

回复 一枚: 你是怎么使用的呢 能发一个复现demo吗？帮你看下

回复 爱豆豆: 发了，麻烦帮忙看下

回复 一枚: 不是uniapp的bug 是组件问题

测试发现应该是ant-tab-bar的current不生效引起的 你可以自己试试 把current改为1 是不会选中 “我的” 然后你两个页面引入的都是这个组件 默认选中的也都是索引为0的tabbar 当你点"我的"页面其实已经跳转了 但是到了新的页面 默认选中并没有改变还是0 所以要再次点击一下 才能选中 “我的” 就造成了需要点击两次这个问题 这并不是uniapp的bug 你可以向这个UI框架官方反馈下这个current不生效的问题 或者换一个tabbar组件就行了 我换了一个插件即可正常切换 你可以参考下

在uni-app小程序中使用自定义tabbar时，遇到switchTab后需要点击2次才能触发active样式的问题，通常是由于页面栈管理和小程序生命周期导致的。以下是解决方案：

  1. 使用自定义tabbar组件时，确保在onShow生命周期中手动更新选中状态：
onShow() {
  if (typeof this.getTabBar === 'function' && this.getTabBar()) {
    this.getTabBar().setData({
      selected: 0 // 对应tabbar索引
    })
  }
}
  1. 在tabbar组件内部，使用current变量控制选中状态，而不是依赖页面路由：
data() {
  return {
    current: 0
  }
},
methods: {
  switchTab(e) {
    const index = e.currentTarget.dataset.index
    this.current = index
    uni.switchTab({
      url: this.list[index].pagePath
    })
  }
}
回到顶部