你是不是也要被UI的1px的分割线难倒过,不要怕,我们来盘他(1px)。闲言碎语不要讲,直接上代码。
效果展示
wxml
<view class="no-more">
<span class="no-more--line"/>
<span class="no-more--txt">没有更多啦</span>
<span class="no-more--line"/>
</view>
wxss
.no-more {
margin: 40rpx 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.no-more--txt {
margin: 0 30rpx;
font-size: 20rpx;
color: #e6e3e3;
}
.no-more--line {
position: relative;
width: 80rpx;
}
/* 1px边框 */
.no-more--line:after {
position: absolute;
box-sizing: border-box;
-webkit-transform-origin: center;
transform-origin: center;
content: ' ';
pointer-events: none;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 0 solid #eee;
border-width: 1px;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
参考链接
[1] vant-weapp 1px边框