@wines/cell-group NPM

`@wines/cell-group`

单元格组 (List 列表)

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

使用指南

在 page.json 中引入组件

{
  "navigationBarTitleText": "List Cell Group",
  "usingComponents": {
    "wux-cell": "@wines/cell",
    "wux-cell-group": "@wines/cell-group"
  }
}

示例

<view class="page">
	<view class="page__hd">
		<view class="page__title">List</view>
		<view class="page__desc">列表</view>
	</view>
	<view class="page__bd">
		<wux-cell-group title="带说明的列表项">
			<wux-cell title="标题文字" />
			<wux-cell title="禁用状态" disabled></wux-cell>
		</wux-cell-group>
		<wux-cell-group title="带图标、说明的列表项">
			<wux-cell thumb="http://cdn.skyvow.cn/logo.png" title="标题文字" extra="说明文字" />
			<wux-cell thumb="http://cdn.skyvow.cn/logo.png" title="标题文字" extra="说明文字" />
		</wux-cell-group>
		<wux-cell-group title="带跳转的列表项" label="底部说明文字">
			<wux-cell title="标题文字" is-link extra="说明文字" />
			<wux-cell
			 title="标题文字"
			 is-link
			 label="附加描述"
			 extra="说明文字"
			/>
			<wux-cell title="只显示箭头" is-link></wux-cell>
			<wux-cell
			 title="跳转到首页"
			 is-link
			 url="/pages/index/index"
			 open-type="switchTab"
			/>
		</wux-cell-group>
		<wux-cell-group title="微信开放能力">
			<wux-cell
			 title="打开客服会话"
			 is-link
			 open-type="contact"
			 bind:contact="onContact"
			/>
			<wux-cell title="触发用户转发" is-link open-type="share" />
			<wux-cell
			 title="获取用户信息"
			 is-link
			 open-type="getUserInfo"
			 bind:getuserinfo="onGotUserInfo"
			/>
			<wux-cell
			 title="获取用户手机号"
			 is-link
			 open-type="getPhoneNumber"
			 bind:getphonenumber="onGotPhoneNumber"
			/>
		</wux-cell-group>
	</view>
</view>

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`	右侧内容	-
hasLine	`boolean`	是否有底部横线	true
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`	在打开授权设置页后回调	-