- 发布：2022-03-07 11:10
- 更新：2022-03-09 16:55
- 阅读：1112
产品分类： HTML5+
HBuilderX版本号： 3.2.9
手机系统： 全部
打包方式： 云端
测试过的手机：
示例代码：
"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": "我"
}
]
}
"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位置
请用HBuilderX3.4.0-alpha测试一下
请提供简单、可稳定复现、能直接运行的完整示例（上传附件），方便我们快速排查问题哦。
【bug优先处理规则】https://ask.dcloud.net.cn/article/38139
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(或者其他浏览器) 运行成功后打开网页 底部导航栏选中‘我’ 刷新页面 会出现红色选中状态选中了‘消息’，而页面依然在‘我’。
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