【黄啊码】微信小程序:用户列表怎么做?_小程序

 微wxml

<view class="user_list">
<view class="row">
<view class="content">
<view class="top">
<view class="nickname">张三</view>
<view class="open_btn"><switch checked="true" style="zoom:.8" bindchange="switch1Change"/><text> 启用</text></view>
</view>
</view>
</view>
<view class="row">
<view class="content">
<view class="top">
<view class="nickname">李四</view>
<view class="open_btn"><switch checked="" style="zoom:.8" bindchange="switch1Change"/><text> 禁用</text></view>
</view>
</view>
</view>
<view class="row">
<view class="content">
<view class="top">
<view class="nickname">王五</view>
<view class="open_btn"><switch checked="" style="zoom:.8" bindchange="switch1Change"/><text> 启用</text></view>
</view>
</view>
</view>
<view class="row">
<view class="content">
<view class="top">
<view class="nickname">赵六</view>
<view class="open_btn"><switch checked="" style="zoom:.8" bindchange="switch1Change"/><text> 启用</text></view>
</view>
</view>
</view>
<view class="the_end">新增人员</view>
</view>

 wxss

/*单元行*/
.row {
display: flex;
flex-direction: row;
align-items: center;
margin: 0 30rpx;
border-bottom: 1px solid #e8e8e8;
}

/*主体*/
.content {
display: flex;
flex-direction: column;
width: 90%;
padding:40rpx;
}

/*昵称与日期*/
.top, .bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
}

/*昵称*/
.nickname {
color: #4d4d4d;
font-size: 40rpx;
}

.open_btn {
font-size: 30rpx;
color: #b2b2b2;
}
.the_end{
height: 110rpx;
background-color: #ce0808;
text-align: center;
line-height: 95rpx;
color: #FFF;
position: fixed;
width: 100%;
bottom: 0rpx;
margin: -1rpx;
overflow: hidden;
float: left;
font-size: 35rpx;
}