• 列表

    列表

    每一组列表顶部和底部都可以添加一些说明文字,样式类分别是 weui-cells__titleweui-cells__tips

    每一组列表的样式类为 weui-cells;列表的每一条目样式类为 weui-cell;每一组列表内可包含多个条目。下面的示例代码中仅有一个条目,顶部和底部的说明文字在 weui-cells 外。

    1. <!-- 列表组顶部说明文字 -->
    2. <div class="weui-cells__title">下面是个列表</div>
    3. <!-- 带说明的列表 -->
    4. <div class="weui-cells">
    5. <div class="weui-cell">
    6. <div class="weui-cell__bd">
    7. <p>标题文字</p>
    8. </div>
    9. <div class="weui-cell__ft">说明文字</div>
    10. </div>
    11. </div>
    12. <!-- 带图标和说明的列表项 -->
    13. <div class="weui-cells">
    14. <div class="weui-cell">
    15. <div class="weui-cell__hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
    16. <div class="weui-cell__bd">
    17. <p>标题文字</p>
    18. </div>
    19. <div class="weui-cell__ft">说明文字</div>
    20. </div>
    21. </div>
    22. <!-- 带跳转的列表 -->
    23. <div class="weui-cells">
    24. <a href="#" class="weui-cell weui-cell_access">
    25. <div class="weui-cell__bd">
    26. <p>标题文字</p>
    27. </div>
    28. <div class="weui-cell__ft"></div>
    29. </a>
    30. </div>
    31. <!-- 带说明、跳转的列表项 -->
    32. <div class="weui-cells">
    33. <a href="#" class="weui-cell weui-cell_access">
    34. <div class="weui-cell__bd">
    35. <p>标题文字</p>
    36. </div>
    37. <div class="weui-cell__ft">说明文字</div>
    38. </a>
    39. </div>
    40. <!-- 带图标、说明、跳转的列表项 -->
    41. <div class="weui-cells">
    42. <a href="#" class="weui-cell weui-cell_access">
    43. <div class="weui-cell__hd"><img src="" alt="" style="width:20px;margin-right:5px;display:block"></div>
    44. <div class="weui-cell__bd">
    45. <p>标题文字</p>
    46. </div>
    47. <div class="weui-cell__ft">说明文字</div>
    48. </a>
    49. </div>
    50. <!-- 列表组底部说明文字 -->
    51. <div class="weui-cells__tips">底部说明文字</div>

    列表 - 图1