小程序
小游戏
企业微信
微信支付
扫描小程序码分享
今天使用自定义tabbar,我按tabbar键跳转到相应页面图标无法更新,它渲染的还是上一个页面的icon,不过跳转功能正常。
4 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你可以尝试在页面跳转后,手动更新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的图标应该会被正确更新。
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
可能图片太大了加载慢?压缩一下,或者就是代码有问题
代码的问题,之前遇到过
这个应该是代码的问题。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你可以尝试在页面跳转后,手动更新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的图标应该会被正确更新。
可能图片太大了加载慢?压缩一下,或者就是代码有问题
代码的问题,之前遇到过
这个应该是代码的问题。