Cell 列表

使用指南

在 page.json 中引入组件

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

视频演示

代码演示

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

API

Attribute 属性

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

Event 事件

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

Slot 插槽

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

Class 自定义类名

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