最近在做一个 tab 标签页,想要的效果是打开页面默认选中第一个标签,字体加粗,出现绿色的底部边框。
点击的时候,被点击的加粗出现绿色边框。(如下图)
在安卓上面测试的没有问题。但是在 iphone 上面测试,打开页面只加粗了,并没有出现绿色边框,
点击其他 tab 的时候绿色的边框会显示出来。不知道是什么原因。
我用的是点击的时候加 class,样式设置如下:
.tab.active {
font-weight: bold;
/* border-bottom: 2px solid #1AAD19; */
border-width: 0 0 2px 0;
border-color: #1AAD19;
border-style: solid;
}
有没有大神知道这是什么原因?
麻烦提供一下出现问题的机型和微信版本,并且给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),我们定位下问题
已经找到问题了。
在 ios 下面需要先给 tab 加上 border 占着位置,然后再给 active 加上 border 才可以出来。