cell列表视图用于将信息以列表的结构显示在页面上,是移动端最常用的内容结构

    每个cell都由weui-cells__titleweui-cells组成

    weui-cells由

    • 缩略图weui-cell__hd
    • 内容主体weui-cell__bd
    • 附件weui-cell__ft组成

    其中weui-cell__bd采用自适应布局

    1. <view>
    2. <view class="weui-cells__title">带说明的列表项</view>
    3. <view class="weui-cells">
    4. <view class="weui-cell">
    5. <view class="weui-cell__bd">
    6. <p>标题文字</p >
    7. </view>
    8. <view class="weui-cell__ft">说明文字</view>
    9. </view>
    10. </view>
    11. <view class="weui-cells">
    12. <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    13. <view class="weui-cell__hd">
    14. <image src="{{icon20}}" style="width: 20px;height: 20px;margin-right: 5px" />
    15. </view>
    16. <view class="weui-cell__bd weui-cell_primary">
    17. <view>文字标题</view>
    18. </view>
    19. <view class="weui-cell__ft weui-cell__ft_in-access"></view>
    20. </navigator>
    21. </view>
    22. </view>

    image.png