收藏
回答

微信ios8.0.69中同时使用subPackages和CustomTabBar选中高亮有问题?

环境如下:

ios微信8.0.69

自定义tabbar(tabBar.custom: true),

所有的二级页面都在一个分包中,       

现象如下:                                                         

当小程序第一次加载后,我点击某个二级页面(此时下载分包),等待分包加载完成页面渲染完成后,然后我返回首页,点击自定义的tabbar,此时页面切过去了,但是tabbar的高亮状态还是首页。

如果我开启预下载分包,在vconsole中看到分包下载完成,等下载完后我再访问二级页面,这个时候再返回到首页,再点击其他的tabbar页面可以正常切换,高亮也正常,请问可能的原因是啥,如何解决呢?

---- ios微信更新前版本是8.0.63,在8.0.63中表现是好的 ---

核心代码:

export default function CustomTabBar() {
  // userTabBarStore 是 一个全局状态管理(zustand),存储了tabBarList和activeTabBar等信息
  const { activeTabBar, tabBarList, setActiveTabBar } = userTabBarStore()

  useEffect(() => {
    const pages = Taro.getCurrentPages()
    const currentPage = pages[pages.length - 1]?.route
    const index = tabBarList?.findIndex((item) => item.pagePath.includes(currentPage || '')) ?? -1
    if (index > -1) setActiveTabBar(index)
  }, [])

  // 切换 Tab
  const switchTab = (item, index) => {
    setActiveTabBar(index)
  }

  return (
    <View className='custom-tab-bar'>
      {tabBarList?.map((item, index) => (
        <View
          key={index}
          className={`tab-item ${activeTabBar === index ? 'active' : ''}`}
          onClick={() => switchTab(item, index)}
        >
          <Image
            src={(activeTabBar === index ? item?.selectedIconPath : item?.iconPath) || ''}
            className='tab-icon'
          />
          <View className='tab-text' style={{ color: activeTabBar === index ? '#FF761E' : '' }}>
            {item.text}
          </View>
        </View>
      ))}
    </View>
  )
}



另外写了一个hook,在tabbar的页面中都引入了

// 自定义tabBarhooks
export const useHandleTabBarHook = (tabNum?: number) => {
  const { tabBarList, setActiveTabBar } = userTabBarStore()


  useDidShow(() => {
    if (tabNum !== undefined) {
      setActiveTabBar(tabNum)


      return
    }
    const pages = Taro.getCurrentPages() // 获取当前页面栈
    const currentPage = pages[pages.length - 1] // 获取当前页面
    const route = currentPage?.route || currentPage?.__displayReporter?.pagePath // 当前页面路径
    const index = tabBarList?.findIndex((item) => item?.pagePath?.includes(route || '')) ?? -1
    if (index > -1) setActiveTabBar(index)
  })
}
最后一次编辑于  03-05
回答关注问题邀请回答
收藏

1 个回答

  • 十年之后唱十年
    十年之后唱十年
    03-05

    各位大佬的小程序有同时用自定义tabbar和分包的,找个苹果手机更新一下微信到8.0.69,应该会复现这个问题!!!

    03-05
    有用
    回复 1
    • 十年之后唱十年
      十年之后唱十年
      03-05
      ios微信更新前版本是8.0.63,在8.0.63中表现是好的
      03-05
      回复
登录 后发表内容