List 列表

基础布局组件，布局时基于 cell-group 和 cell 来定义信息区块的外部框架。

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "List",
  3.     "usingComponents": {
  4.         "wux-cell-group": "../../dist/cell-group/index",
  5.         "wux-cell": "../../dist/cell/index"
  6.     }
  7. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">List</view>
  4.         <view class="page__desc">列表</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <wux-cell-group title="带说明的列表项">
  8.             <wux-cell title="标题文字"></wux-cell>
  9.             <wux-cell title="禁用状态" disabled></wux-cell>
  10.         </wux-cell-group>
  11.         <wux-cell-group title="带图标、说明的列表项">
  12.             <wux-cell thumb="https://wux.cdn.cloverstd.com/logo.png" title="标题文字" extra="说明文字"></wux-cell>
  13.             <wux-cell thumb="https://wux.cdn.cloverstd.com/logo.png" title="标题文字" extra="说明文字"></wux-cell>
  14.         </wux-cell-group>
  15.         <wux-cell-group title="带跳转的列表项" label="底部说明文字">
  16.             <wux-cell title="标题文字" is-link extra="说明文字"></wux-cell>
  17.             <wux-cell title="标题文字" is-link label="附加描述" extra="说明文字"></wux-cell>
  18.             <wux-cell title="只显示箭头" is-link></wux-cell>
  19.             <wux-cell title="跳转到首页" is-link url="/pages/index/index" open-type="switchTab"></wux-cell>
  20.         </wux-cell-group>
  21.         <wux-cell-group title="微信开放能力">
  22.             <wux-cell title="打开客服会话" is-link open-type="contact" bind:contact="onContact"></wux-cell>
  23.             <wux-cell title="触发用户转发" is-link open-type="share"></wux-cell>
  24.             <wux-cell title="获取用户信息" is-link open-type="getUserInfo" bind:getuserinfo="onGotUserInfo"></wux-cell>
  25.             <wux-cell title="获取用户手机号" is-link open-type="getPhoneNumber" bind:getphonenumber="onGotPhoneNumber"></wux-cell>
  26.         </wux-cell-group>
  27.     </view>
  28. </view>
  1. Page({
  2.     onContact(e) {
  3.         console.log('onContact', e)
  4.     },
  5.     onGotUserInfo(e) {
  6.         console.log('onGotUserInfo', e)
  7.     },
  8.     onGotPhoneNumber(e) {
  9.         console.log('onGotPhoneNumber', e)
  10.     },
  11. })

视频演示

List

API

CellGroup props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-cell-group
title string 标题 -
label string 描述 -

CellGroup externalClasses

名称 描述
wux-class 根节点样式类

Cell props

参数 类型 描述 默认值
prefixCls string 自定义类名前缀 wux-cell
disabled boolean 是否禁用 false
openType string 跳转方式，可选值为 navigateTo、redirectTo、switchTab、navigateBack、reLaunch；微信开放能力，可选值为 contact、share、getUserInfo、getPhoneNumber、launchApp、openSetting、feedback navigateTo
hoverClass string 指定按下去的样式类。当 hover-class=”none” 时，没有点击态效果 default
hoverStopPropagation boolean 指定是否阻止本节点的祖先节点出现点击态 false
hoverStartTime number 按住后多久出现点击态，单位毫秒 20
hoverStayTime number 手指松开后点击态保留时间，单位毫秒 70
lang string 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。 en
sessionFrom string 会话来源 -
sendMessageTitle string 会话内消息卡片标题 当前标题
sendMessagePath string 会话内消息卡片点击跳转小程序路径 当前分享路径
sendMessageImg string 会话内消息卡片图片 截图
showMessageCard boolean 显示会话内消息卡片 false
appParameter string 打开 APP 时，向 APP 传递的参数 -
thumb string 左侧缩略图 -
title string 左侧标题 -
label string 标题下方的描述信息 -
extra string 右侧内容 -
isLink boolean 是否展示右侧箭头并开启尝试以 url 跳转 -
url string 跳转链接 -
delta number 当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数 1
bind:click function 点击事件 -
bind:getuserinfo function 用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致 -
bind:contact function 客服消息回调 -
bind:getphonenumber function 获取用户手机号回调 -
bind:error function 当使用开放能力时，发生错误的回调 -
bind:opensetting function 在打开授权设置页后回调 -

更多参数说明请参考微信官方的表单组件 Button。

Cell slot

名称 描述
- 自定义标题或描述
header 自定义左侧缩略图
footer 自定义右侧内容

Cell externalClasses

名称 描述
wux-class 根节点样式类