Cell 列表

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-cell": "wuss-weapp/w-cell/index",
  3. }

视频演示

代码演示

  1. <w-pane title="Cell" desc="列表" />
  3. <w-pane desc="Default" />
  4. <w-cell-group>
  5.     <w-cell
  6.      label="列表"
  7.      highlight
  8.      content="内容"
  9.     />
  10. </w-cell-group>
  12. <w-pane desc="Desc" />
  13. <w-cell-group>
  14.     <w-cell
  15.      label="列表"
  16.      highlight
  17.      content="内容"
  18.      desc="附加标题"
  19.     />
  20. </w-cell-group>
  22. <w-pane desc="Multiple" />
  23. <w-cell-group>
  24.     <w-cell
  25.      isLink
  26.      label="列表{{index}}"
  27.      highlight
  28.      content="内容{{index}}"
  29.      wx:for="{{4}}"
  30.      wx:key="index"
  31.     />
  32. </w-cell-group>
  34. <w-pane desc="Link" />
  35. <w-cell-group>
  36.     <w-cell
  37.      isLink
  38.      label="navigateTo"
  39.      highlight
  40.      content="w-button"
  41.      link="../w-button/index"
  42.     />
  43.     <w-cell
  44.      isLink
  45.      label="redirectTo"
  46.      highlight
  47.      content="w-button"
  48.      linkType="redirectTo"
  49.      link="../w-button/index"
  50.     />
  51.     <w-cell
  52.      isLink
  53.      label="switchTab"
  54.      highlight
  55.      content="index"
  56.      linkType="redirectTo"
  57.      link="../index/index"
  58.     />
  59.     <w-cell
  60.      isLink
  61.      label="navigateBack"
  62.      highlight
  63.      content="w-button"
  64.      linkType="navigateBack"
  65.      delta="1"
  66.     />
  67. </w-cell-group>
  69. <w-pane desc="Icon" />
  70. <w-cell-group>
  71.     <w-cell
  72.      isLink
  73.      label="example title"
  74.      highlight
  75.      content="example description"
  76.      icon="home"
  77.     />
  78. </w-cell-group>
  80. <w-pane desc="Disabled" />
  81. <w-cell-group>
  82.     <w-cell
  83.      isLink
  84.      disabled
  85.      label="消息"
  86.      link="/message"
  87.     />
  88.     <w-cell
  89.      isLink
  90.      disabled
  91.      label="列表"
  92.      link="/message"
  93.     />
  94.     <w-cell
  95.      isLink
  96.      disabled
  97.      label="设置"
  98.      link="/message"
  99.     />
  100. </w-cell-group>
  102. <w-pane desc="Slot" />
  103. <w-cell-group>
  104.     <w-cell
  105.      isLink
  106.      highlight
  107.      icon="home"
  108.      link="/message"
  109.     >
  110.         <view slot="label">
  111.             我的消息
  112.         </view>
  113.         <view slot="content">
  114.             内容
  115.         </view>
  116.     </w-cell>
  117.     <w-cell
  118.      isLink
  119.      highlight
  120.      desc="您在闲鱼上售卖的产品已出售，点击查看详情"
  121.      wuss-class-hd="w-cell-hd"
  122.      wuss-class-left="w-cell-left"
  123.     >
  124.         <view
  125.          slot="label"
  126.          class="w-cell-label"
  127.          hover-class="none"
  128.          hover-stop-propagation="false"
  129.         >
  130.             <view
  131.              class="left"
  132.              hover-class="none"
  133.              hover-stop-propagation="false"
  134.             >
  135.                 您有新的通知
  136.             </view>
  137.             <view
  138.              style="font-size: 14px;color: #999999;"
  139.              class="right"
  140.              hover-class="none"
  141.              hover-stop-propagation="false"
  142.             >
  143.                 10-31 09:12
  144.             </view>
  145.         </view>
  146.         <image
  147.          slot="icon"
  148.          class="w-cell-avatar"
  149.          src="../../assets/logo.png"
  150.         />
  151.     </w-cell>
  152. </w-cell-group>
  1. .w-cell-avatar {
  2.   width: 35px;
  3.   height: 35px;
  4.   border-radius: 50%;
  5.   overflow: hidden;
  6.   margin-right: 10px;
  7.   padding: 5px;
  8.   border: 1rpx solid #eeeeee;
  9. }
  11. .w-cell-label {
  12.   display: flex;
  13.   flex: 1;
  14.   justify-content: space-between;
  15.   flex-direction: row;
  16.   flex-wrap: nowrap;
  17.   padding-bottom: 2px;
  18. }
  20. .w-cell-hd {
  21.   padding: 10px 15px!important;
  22. }
  24. .w-cell-left {
  25.   padding-right: 0!important;
  26. }

API

Attribute 属性

属性 说明 类型 默认值
label 标题 string -
labelSpan 标题宽度可选值1-5 string -
content 内容 string -
desc 附加描述 string -
isLink 是否是链接 开启后显示右边箭头 boolean false
link isLink为true时,link为跳转的url string -
icon 标题图标 string -
iconSize 图标大小 string -
iconColor 图标颜色 string -
delta 当linkType值为 navigateBack 时有效，表示返回页面层数 number 1
linkType 跳转类型，类型有 [navigateTo/redirectTo/switchTab/reLaunch/navigateBack] string navigateTo
disabled 禁用cell boolean false
highlight 开启hover class boolean false
direction 内容区的显示方向 string flex-end
isValidateIcon 是否是表单中的按钮,开启是将触发表单功能 boolean false

Event 事件

事件名 说明 参数
onClick 点击事件回调 ——

Slot 插槽

名称 说明
icon 自定义图标slot
label 左边标题的slot
content 内容区slot
slot 默认的slot是content的slot

Class 自定义类名

类名 说明
wuss-class 组件根样式类
wuss-class-cell cell样式类
wuss-class-hd 头部样式类
wuss-class-left 内容区左边样式类
wuss-class-right 内容区右边样式类
wuss-class-content 内容区样式类
wuss-class-ft 底部样式类