效果图
微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：/topic/huangjuhua
wxml代码
<view class="page"><view class="page__hd"><view class="page__title">List</view><view class="page__desc">列表</view></view><view class="page__bd"><view class="weui-cells__title">带说明的列表项</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell"><view class="weui-cell__bd">标题文字</view><view class="weui-cell__ft">说明文字</view></view></view><view class="weui-cells__title">带图标、说明的列表项</view><view class="weui-cells weui-cells_after-title"><view class="weui-cell"><view class="weui-cell__hd"><image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">标题文字</view><view class="weui-cell__ft">说明文字</view></view><view class="weui-cell"><view class="weui-cell__hd"><image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">标题文字</view><view class="weui-cell__ft">说明文字</view></view></view><view class="weui-cells__title">带跳转的列表项</view><view class="weui-cells weui-cells_after-title"><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access"></view></navigator></view><view class="weui-cells__title">带说明、跳转的列表项</view><view class="weui-cells weui-cells_after-title"><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator></view><view class="weui-cells__title">带图标、说明、跳转的列表项</view><view class="weui-cells weui-cells_after-title"><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__hd"><image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator><navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active"><view class="weui-cell__hd"><image src="/images/weui.png" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image></view><view class="weui-cell__bd">cell standard</view><view class="weui-cell__ft weui-cell__ft_in-access">说明文字</view></navigator></view></view></view>
欢迎大家学习我的视频教程：微信小程序-WeUI界面布局设计入门到精通
