本文介绍了在移动端开发中遇到的两个常见问题及解决方案。一是针对van-tabs组件，真机上背景颜色和激活文本颜色未显示的问题，通过调整/deep/选择器的使用方式修复了样式。二是transform: translateY导致的tab标签页吸顶效果失效，通过将transform替换为margin-top解决了问题。
1 关于van-tabs：
这是模拟器下除iphone5/SE以外的样式。一切正常。但是真机上背景颜色和激活时的文本颜色没有出来。源代码如下：
/deep/ .van-tabs__wrap--scrollable .van-tab {
padding: 0;
}
/deep/ .van-tabs__nav--complete {
padding: 0;
}
/deep/ .van-tabs__nav--card {
border: none;
margin: 0;
font-size: 14px;
text-align: center;
}
/deep/ .van-tabs__nav--card .van-tab {
border: none;
}
/deep/ .van-tab--active {
background: #fff;
/depp/.van-tab__text {
color: #fe7100 !important;
background: #fef0e5 !important;
}
}
/deep/ .van-tab__text {
display: inline-block;
// width: 60px;
background: #f5f5f5;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 16px;
margin-right: 8px;
}
}
既然是激活时样式出了问题。我们排查下.
/deep/ .van-tab--active {
background: #fff;
.van-tab__text { //注意这里去掉了/deep/
color: #fe7100 !important;
background: #fef0e5 !important;
}
}
改成如下：
/deep/ .van-tab--active {
background: #fff;
/depp/.van-tab__text {
color: #fe7100 !important;
background: #fef0e5 !important;
}
}
正常了。
2 tranform：tranlateY导致的tab标签页你吸顶效果失效。
如图。红色箭头处，设计需要圆形倒角，最开始的做法是通过给底下的整个大盒子设置transform: translateY(-20px);往上提。这样漏出圆角。虽然效果实现了。但是引发了一个大的bug，红色方框内的tab标签页吸顶效果失效。检查了各种父级。没发现设置了高度或者overflow：scroll或者auto属性。最后去掉transform: translateY(-20px);改成margin-top:-20px.发现吸顶效果正常了
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
