q***@gmail.com
q***@gmail.com
  • 发布:2024-06-02 16:32
  • 更新:2024-09-07 13:39
  • 阅读:195

【报Bug】tabbar 在 h5 环境下在反复点击不同的 item 后,midButton 图片显示错误

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 14.5 (23F79)

HBuilderX类型: 正式

HBuilderX版本号: 4.15

浏览器平台: Chrome

浏览器版本: 版本 125.0.6422.113(正式版本) (arm64)

项目创建方式: HBuilderX

操作步骤:

然后点击了“我的”“首页”等等 tabbar item,来回点击几次,midButton的图片

预期结果:

midButton的图片路径不要变化

实际结果:

midButton的图片异常

bug描述:

tabbar 在 h5 环境下在反复点击不同的 item 后,midButton 图片显示错误。
一开始的配置是这样的,显示是正常的。

"midButton": {  
    "iconPath": "static/tabbar/mid.png",  
    "width": "80px",  
    "height": "90px",  
    "iconWidth": "80px"  
}

此时通过 Chrome 的检查元素看到midButton节点如下:
<img src="static/tabbar/mid.png" style="width: 80px; height: 80px;">

然后点击了“我的”“首页”等等 tabbar item,来回点击几次,midButton的图片就显示异常。此时的midButton节点如下:
<img src="/pages/mine/static/tabbar/mid.png" style="width: 80px; height: 80px;">

图片的路径被改动了,前面自动加上了 /pages/mine 前缀,如果切换到 home 就变成了 /pages/home 前缀。导致读取错误的路径,图片显示异常

2024-06-02 16:32 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

试了,没发现,你试试附件的demo

q***@gmail.com

q***@gmail.com (作者)

@喜欢技术的前端 你这个确实没问题,但是我的还是有问题。我提交代码给你看看

  • 喜欢技术的前端

    是有点问题,vue3 下会出问题,可以先改成


    "midButton": {  
    "backgroundImage": "static/tabbar/redbag.png",
    "width": "80px",
    "height": "80px",
    "iconWidth": "80px"
    }

    2024-06-02 17:40

  • q***@gmail.com (作者)

    回复 喜欢技术的前端: 嗯,我想要的是不要离底太近,只是搞不懂怎么会引发图片路径变化。这个值应该固定才对的

    2024-06-02 17:45

  • 喜欢技术的前端

    回复 q***@gmail.com: 是的,之前没遇到过,也可以让UI小伙伴,给底下切写透明边也是个办法

    2024-06-02 17:48

  • q***@gmail.com (作者)

    回复 喜欢技术的前端: 嗯,bug 能修复就好,其他都是曲线救国的临时方案。有点麻烦的。

    2024-06-02 17:56

1***@163.com

1***@163.com

解决了吗,我也遇到这个问题Vue3

will0523

will0523

同问,我也遇到了

要回复问题请先登录注册