效果图如下
需求说明
不就是加一条分割线吗？有什么难的？
这可不是普通的分割线
每行数据的下面需要有一条分割线，最后一行数据底部无需分割线，如果某行数据为空，则该行不显示（所以这条线不能写死）
解决方案
给css样式用上CSS的兄弟选择器 +
代码详情
HTML代码
//父级
<view class="labelbg">
//子级1
<view class="labelbg__contentPropertyBox">
<text class="labelbg__contentPropertyBox__labelTitle">完成时间</text>
<text class="labelbg__contentPropertyBox__labelContent">{
{
model.checkPlanBo && model.checkPlanBo.executeUserName}}</text>
</view>
//子级2
<view class="labelbg__contentPropertyBox">
<text class="labelbg__contentPropertyBox__labelTitle">是否逾期</text>
<text class="labelbg__contentPropertyBox__labelContent" :style="{color: model.overdueName == '是' ? '#34C759' : '#FF4042'}" >{
{
model.overdueName}}</text>
</view>
//子级3
<view class="labelbg__contentPropertyBox">
<text class="labelbg__contentPropertyBox__labelTitle">问题总数</text>
<text class="labelbg__contentPropertyBox__labelContent">{
{
model.abnormalNum||0}}</text>
</view>
</view>
css代码
//看过来 就是这样写的
//下面也有写到contentPropertyBox 只要把兄弟元素有区别的样式拎出来写在这里就可以
.labelbg__contentPropertyBox + .labelbg__contentPropertyBox{
width: 686rpx;
border-top-width:0.5rpx;
border-top-style:solid;
border-top-color:$gray-7;
}
.labelbg{
width: 750rpx;
background-color: $uni-bg-color;
//就是这里 把兄弟元素相同的样式放这里
&__contentPropertyBox {
flex-flow: row;
justify-content: flex-start;
display: flex;
padding-top: 29rpx;
padding-bottom: 29rpx;
margin:0rpx 32rpx 0rpx 32rpx;
&__labelTitle{
font-size: 30rpx;
color: $gray-3;
width: 156rpx;
}
&__labelContent{
font-size: 30rpx;
color: $gray-1;
width: 530rpx;
}
}
补充知识
示例效果图：
1.+
(1)同一个父元素的不同元素兄弟，+只会影响后面对应标签的第一个(相邻的)兄弟节点的标签样式。(并不影响前面的兄弟节点)
ul + p{
color:green;
}
效果图：
(2)同一个父元素的相同元素兄弟，+会循环依次影响对应标签的第一个(相邻的)兄弟节点的标签样式。(并不影响前面的兄弟节点)
li + li{
color:red;
}
效果图：
2.~
(1)同一个父元素的不同元素兄弟，~会影响后面对应标签的所有兄弟节点的标签样式。(并不影响前面的兄弟节点)
ul ~ p{
color:green;
}
效果图：
(2)同一个父元素的相同元素兄弟，~只会影响后面对应标签的所有兄弟节点的标签样式。(并不影响前面的兄弟节点)
li ~ li{
color:red;
}
效果图：
3.综上
(1)+和~都不会影响元素前面的兄弟节点的样式
(2)+只会影响对应的后面第一个(相邻的)兄弟节点样式；而~则影响对应的后面的所有兄弟节点样式。
来源： https://blog.csdn.net/jarisMA/article/details/100105595