收藏
回答

自定义tabbar,tabbar切换时所对应的激活图片无法实时更新,总是慢一步,怎么办?

今天使用自定义tabbar,我按tabbar键跳转到相应页面图标无法更新,它渲染的还是上一个页面的icon,不过跳转功能正常。

回答关注问题邀请回答
收藏

4 个回答

  • CRMEB
    CRMEB
    2023-10-16

    你可以尝试在页面跳转后,手动更新tabbar的图标。具体操作如下:


    1. 在`App.vue`中,找到自定义tabbar的代码部分。

    2. 在`onShow()`生命周期钩子中,添加更新tabbar图标的逻辑。例如:


    export default {
      // ...
      onShow() {
        // 更新tabbar图标的逻辑
        this.updateTabBarIcon();
      },
      methods: {
        updateTabBarIcon() {
          // 获取当前页面的路由信息
          const currentPage = getCurrentPages().pop();
          const route = currentPage.__route__;
          const path = route.path;
    
          // 根据路径设置对应的tabbar图标
          switch (path) {
            case '/pages/home/home':
              this.setTabBarItem({
                text: '首页',
                iconPath: 'static/home.png',
                selectedIconPath: 'static/home-selected.png'
              });
              break;
            case '/pages/category/category':
              this.setTabBarItem({
                text: '分类',
                iconPath: 'static/category.png',
                selectedIconPath: 'static/category-selected.png'
              });
              break;
            // 其他页面...
            default:
              this.setTabBarItem({
                text: '首页',
                iconPath: 'static/home.png',
                selectedIconPath: 'static/home-selected.png'
              });
          }
        }
      }
    };
    


    3. 在需要跳转的页面中,调用`uni.navigateTo()`或`uni.switchTab()`等方法进行页面跳转。例如:


    this.$router.push('/pages/home/home'); // 或者使用 uni.navigateTo()、uni.switchTab() 等方法进行页面跳转
    


    4. 这样,在页面跳转后,自定义tabbar的图标应该会被正确更新。

    2023-10-16
    有用 1
    回复
  • 一笑皆春
    一笑皆春
    2023-10-16

    可能图片太大了加载慢?压缩一下,或者就是代码有问题

    2023-10-16
    有用 1
    回复 2
    • )
      2023-10-16
      找到了,custom-tab-bar文件要放在components路径下面
      2023-10-16
      回复
    • 一笑皆春
      一笑皆春
      2023-10-17回复
      嗯嗯
      2023-10-17
      回复
  • 肥嘟嘟中卫门
    肥嘟嘟中卫门
    2023-10-16

    代码的问题,之前遇到过

    2023-10-16
    有用
    回复
  • Jianbo
    Jianbo
    2023-10-16

    这个应该是代码的问题。

    2023-10-16
    有用
    回复
登录 后发表内容