1.example.wxml
<!--pages/usercenter/usercenter.wxml-->
<view class="weui-cells__title">
带说明的列表项
</view>
<view class="weui-cells">
<view class="weui-cell">
<view class="weui-cell__bd">
<text>标题文字</text>
</view>
<view class="weui-cell__ft">
说明文字
</view>
</view>
</view>
2.weui.wxss
.weui-cells{
margin-top:1.17647059em;
background-color:#FFFFFF;
line-height:1.47058824;
font-size:17px;
overflow:hidden;
position:relative;
}
.weui-cells:before{
content:" ";
position:absolute;
left:0;
top:0;
right:0;
height:1px;
border-top:1px solid #e5e5e5;
color:#e5e5e5;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:scaleY(0.5);
transform:scaleY(0.5);
z-index:2;
}
.weui-cells:after{
content:" ";
position:absolute;
left:0;
bottom:0;
right:0;
height:1px;
border-bottom:1px solid #e5e5e5;
color:#e5e5e5;
-webkit-transform-origin:0 100%;
transform-origin:0 100%;
-webkit-transform:scaleY(0.5);
transform:scaleY(0.5);
z-index:2;
}
.weui-cells__title{
margin-top:.77em;
margin-bottom:.3em;
padding-left:15px;
padding-right:15px;
color:#999999;
font-size:14px;
}
.weui-cells__title + .weui-cells{
margin-top:0;
}
.weui-cell{
padding:10px 15px;
position:relative;
display:-webkit-box;
display:-webkit-flex;
display:flex;
-webkit-box-align:center;
-webkit-align-items:center;
align-items:center;
}
.weui-cell:before{
content:" ";
position:absolute;
left:0;
top:0;
right:0;
height:1px;
border-top:1px solid #e5e5e5;
color:#e5e5e5;
-webkit-transform-origin:0 0;
transform-origin:0 0;
-webkit-transform:scaleY(0.5);
transform:scaleY(0.5);
left:15px;
z-index:2;
}
.weui-cell:first-child:before{
display:none;
}
.weui-cell__bd{
-webkit-box-flex:1;
-webkit-flex:1;
flex:1;
}
.weui-cell__ft{
text-align:right;
color:#999999;
}