List

列表

WeUI 用 Cell 来显示列表视图,用于将信息以列表的结构显示在页面上。Cell由多个section组成,每个 section 包括 section header weui-cells__title 以及 cells weui-cells

cell 由 thumbnail(图标) weui-cell__hd、body(标题文字) weui-cell__bd、accessory(说明文字) weui-cell__ft三部分组成,其中weui-cell__bd采用自适应布局。

普通列表项

  1. <div class="weui-cells__title">带图标、说明的列表项</div>
  2. <div class="weui-cells weui-cells_after-title">
  3. <div class="weui-cell">
  4. <div class="weui-cell__hd">
  5. <image :src="icon" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
  6. </div>
  7. <div class="weui-cell__bd">标题文字</div>
  8. <div class="weui-cell__ft">说明文字</div>
  9. </div>
  10. <div class="weui-cell">
  11. <div class="weui-cell__hd">
  12. <image :src="icon" style="margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
  13. </div>
  14. <div class="weui-cell__bd">标题文字</div>
  15. <div class="weui-cell__ft">说明文字</div>
  16. </div>
  17. </div>

效果

list02

从图中可以看出最外面的 cell 有1个 section 组成,这个 section 包含了 section header(带图标、说明的列表项),以及 cells (有两个cell)。cells 下的每个 cell 包含了 thumbnail(图标),body(标题文字),accessory(说明文字)。从而构成了一个完整的列表视图。

带跳转功能的列表项

  1. <div class="weui-cells__title">带跳转的列表项</div>
  2. <div class="weui-cells weui-cells_after-title">
  3. <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
  4. <div class="weui-cell__bd">cell standard</div>
  5. <div class="weui-cell__ft weui-cell__ft_in-access"></div>
  6. </navigator>
  7. <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
  8. <div class="weui-cell__bd">cell standard</div>
  9. <div class="weui-cell__ft weui-cell__ft_in-access"></div>
  10. </navigator>
  11. </div>

效果

list03

如果要实现带跳转的列表项,只需要在每个 cells 下的每个 cell 最外层套上一个 navigator 组件,并加上一个 weui-cell_access 类名。要出现一个跳转箭头,在 accessory(说明文字)部分加上 weui-cell__ft_in-access类名。