9***@qq.com
9***@qq.com
  • 发布:2022-03-07 11:10
  • 更新:2022-03-09 16:55
  • 阅读:345

【报Bug】 uniapp h5 使用 midButton后底部导航栏显示错误

分类:HTML5+

产品分类: HTML5+

HBuilderX类型: 正式

HBuilderX版本号: 3.2.9

手机系统: 全部

打包方式: 云端

测试过的手机:

华为 小米 iphone 7puls/13/X

示例代码:
"tabBar": {  
        "borderStyle": "black",  
        "backgroundColor": "#333",  
        "color": "#8F8F94",  
        "selectedColor": "#f33e54",  
        "midButton": {  
            "height": "50px",  
            "iconWidth": "44px",  
            "selectedIconPath": "./static/img/imgUi/chuangzuo1.png",  
            "iconPath": "./static/img/imgUi/chuangzuo1.png"  

        },  
        "list": [{  
                "pagePath": "pages/tabbar/tabbar-1/tabbar-1",  
                "iconPath": "static/img/tabbar/home.png",  
                "selectedIconPath": "static/img/tabbar/homeactive.png",  
                "text": "首页"  
            },  
            {  
                "pagePath": "pages/tabbar/tabbar-2/tabbar-2",  
                "iconPath": "static/img/tabbar/guanzhu.png",  
                "selectedIconPath": "static/img/tabbar/guanzhuactive.png",  
                "text": "关注"  
            },  
            {  
                "pagePath": "pages/tabbar/tabbar-4/tabbar-4",  
                "iconPath": "static/img/tabbar/news.png",  
                "selectedIconPath": "static/img/tabbar/newsactive.png",  
                "text": "消息"  
            },  
            {  
                "pagePath": "pages/tabbar/tabbar-5/tabbar-5",  
                "iconPath": "static/img/tabbar/me.png",  
                "selectedIconPath": "static/img/tabbar/meactive.png",  
                "text": "我"  
            }  
        ]  
    }

操作步骤:

如上

预期结果:

正确显示

实际结果:

错误显示

bug描述:

h5项目,共4个tabBar, page.json中使用midButton创建中间凸起按钮后,点击第3或者第4个页面,刷新网页,底部tabBar栏加粗效果显示错误,表现为加粗效果向左移动一个tabber位置

2022-03-07 11:10 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

请用HBuilderX3.4.0-alpha测试一下
请提供简单、可稳定复现、能直接运行的完整示例(上传附件),方便我们快速排查问题哦。
【bug优先处理规则】https://ask.dcloud.net.cn/article/38139

  • 9***@qq.com (作者)

    已提供稳定可复现demo,请查收

    2022-03-09 10:59

  • DCloud_UNI_Anne

    回复 9***@qq.com: 收到,另外如果以上报bug模板中的各类信息是乱写的话,还请正确填写,否则影响我们鉴定排查问题哦

    2022-03-09 11:13

  • 9***@qq.com (作者)

    回复 DCloud_UNI_Anne: 是正确的吧,上面列举的手机都有这个问题,电脑上也存在,

    2022-03-09 11:47

  • DCloud_UNI_Anne

    回复 9***@qq.com: 你是想说点击midButton时,没有显示选中时的效果吗?

    2022-03-09 14:19

  • DCloud_UNI_Anne

    回复 9***@qq.com: 上述模板信息中,产品分类应该选uni-app

    2022-03-09 14:23

  • 9***@qq.com (作者)

    回复 DCloud_UNI_Anne: 问题不是点击midButton时没效果,是在底部导航栏中选中第3项或者第4项(也就是demo中的‘消息’,‘我的’)后,刷新页面,选中状态会向左移动一格,比如选中‘我的’,刷新页面,选中状态会跑到‘消息’去。

    那个。。。4不是偶数吗,不好意思我可能不是很理解这个文档,我按照文档使用的midbutton,说明的是要偶数才能生效,所以我在page.json中tabbar下list列表写了4项,在我的理解中也是2,4项才能使用midbutton

    模板信息这个以为我是h5项目,生成项目是也是选中的h5+,如果这样填写是错误的我下次改正,不好意思第一次提bug

    2022-03-09 16:05

  • DCloud_UNI_Anne

    回复 9***@qq.com: 不好意思,我看错了,你试下 底部选项卡模板https://ext.dcloud.net.cn/plugin?id=98,能出现你的问题吗?

    2022-03-09 16:23

  • DCloud_UNI_Anne

    回复 9***@qq.com: Android 11 Redmi K40 自带浏览器测试未复现此问题

    2022-03-09 16:36

  • 9***@qq.com (作者)

    回复 DCloud_UNI_Anne: 使用了 底部选项卡模板https://ext.dcloud.net.cn/plugin?id=98 进行尝试,经过因项目需求细微修改后可复现该问题,详见我刚发布的一条评论

    2022-03-09 16:52

9***@qq.com

9***@qq.com (作者)

``
{
"pages": [
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/tabbar/tabbar-1/tabbar-1",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/tabbar/tabbar-2/tabbar-2",
"style": {}
},
{
"path": "pages/tabbar/tabbar-3/tabbar-3",
"style": {}
},
{
"path": "pages/tabbar/tabbar-4/tabbar-4",
"style": {}
},
{
"path": "pages/tabbar/tabbar-5/tabbar-5",
"style": {}
},
{
"path": "pages/tabbar-3-detial/tabbar-3-release/tabbar-3-release",
"style": {}
},
{
"path": "pages/tabbar-3-detial/tabbar-3-video/tabbar-3-video",
"style": {}
},
{
"path": "pages/tabbar-3-detial/tabbar-3-qa/tabbar-3-qa",
"style": {}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"borderStyle": "black",
"backgroundColor": "#333",
"color": "#8F8F94",
"selectedColor": "#f33e54",
"midButton": {
"height": "50px",
"width":"80px",
"iconWidth": "44px",
"selectedIconPath": "./static/img/imgUi/chuangzuo1.png",
"iconPath": "./static/img/imgUi/chuangzuo1.png"
},
"list": [{
"pagePath": "pages/tabbar/tabbar-1/tabbar-1",
"iconPath": "static/img/tabbar/home.png",
"selectedIconPath": "static/img/tabbar/homeactive.png",
"text": "首页"
},
{
"pagePath": "pages/tabbar/tabbar-2/tabbar-2",
"iconPath": "static/img/tabbar/guanzhu.png",
"selectedIconPath": "static/img/tabbar/guanzhuactive.png",
"text": "关注"
},
{
"pagePath": "pages/tabbar/tabbar-4/tabbar-4",
"iconPath": "static/img/tabbar/news.png",
"selectedIconPath": "static/img/tabbar/newsactive.png",
"text": "消息"
},
{
"pagePath": "pages/tabbar/tabbar-5/tabbar-5",
"iconPath": "static/img/tabbar/me.png",
"selectedIconPath": "static/img/tabbar/meactive.png",
"text": "我"
}
]
}
}

``

底部选项卡模板https://ext.dcloud.net.cn/plugin?id=98 经过细微修改后会出现此问题(由于项目需要,必须使用midButton,所以删除原模板中list的第3项并加入minButton,仅这两点修改),将底部选项卡模板引入hnuilderX 将pages.json修改为如上示例代码 点击运行 运行到浏览器 选择 chrome(或者其他浏览器) 运行成功后打开网页 底部导航栏选中‘我’ 刷新页面 会出现红色选中状态选中了‘消息’,而页面依然在‘我’。

  • DCloud_UNI_Anne

    请用HBuilderX3.4.1-alpha测试一下

    2022-03-09 20:20

  • 9***@qq.com (作者)

    回复 DCloud_UNI_Anne: 非常感谢,版本升级后bug消失,不好意思之前没往编译工具方面考虑。

    2022-03-10 16:49

9***@qq.com

9***@qq.com (作者)

展示如图

要回复问题请先登录注册