微信小程序 WeUI·Cell
Cell
Cell是列表或者是表单的一项，常用于设置页的展示，或者用在表单中，作为表单的每一个要填写的项，Cell必须要放在Cells组件的下面。
示例代码：
{
"usingComponents": {
"mp-cells": "../components/cells/cells",
"mp-cell": "../components/cell/cell",
"mp-slideview": "../components/slideview/slideview"
}
}<view class="page">
<view class="page__hd">
<view class="page__title">Cell</view>
<view class="page__desc">列表</view>
</view>
<view class="page__bd">
<mp-cells ext-class="my-cells" title="带说明的列表项">
<mp-cell value="标题文字" footer="说明文字"></mp-cell>
<mp-cell>
<view>标题文字（使用slot）</view>
<view slot="footer">说明文字</view>
</mp-cell>
<mp-slideview buttons="{{slideButtons}}" bindbuttontap="slideButtonTap">
<mp-cell value="左滑可以删除" footer="说明文字"></mp-cell>
</mp-slideview>
</mp-cells>
<mp-cells title="带图标、说明的列表项" footer="底部说明文字">
<mp-cell value="标题文字" footer="说明文字">
<image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
</mp-cell>
<mp-cell value="标题文字" footer="说明文字">
<image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
</mp-cell>
</mp-cells>
<mp-cells title="带跳转的列表项">
<mp-cell link hover value="有hover效果" footer="说明文字">
<image slot="title" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
</mp-cell>
<mp-cell link value="无hover效果" footer="说明文字">
<image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
</mp-cell>
<mp-cell link url="../index" value="无hover效果，带跳转URL" footer="说明文字">
<image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
</mp-cell>
</mp-cells>
</view>
</view>var base64 = require("../images/base64");
Page({
onLoad: function(){
this.setData({
icon: base64.icon20,
slideButtons: [{
text: '普通',
src: '/page/weui/cell/icon_love.svg', // icon的路径
},{
text: '普通',
extClass: 'test',
src: '/page/weui/cell/icon_star.svg', // icon的路径
},{
type: 'warn',
text: '警示',
extClass: 'test',
src: '/page/weui/cell/icon_del.svg', // icon的路径
}],
});
},
slideButtonTap(e) {
console.log('slide button tap', e.detail)
}
});
属性列表
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| ext-class | string | 否 | 添加在组件内部结构的class，可用于修改组件内部的样式 | |
| icon | string | 否 | Cell的最左侧的icon，是本地图片的路径，icon和名为icon的slot互斥 | |
| title | string | 否 | Cell最左侧的标题，一般用在Form表单组件里面，icon和title二选一，title和名为title的slot互斥 | |
| hover | boolean | false | 否 | 是否有hover效果 |
| link | boolean | false | 否 | 右侧是有跳转的箭头，v1.0后的版本，link: true 会自带 hover 效果 |
| value | string | 是 | Cell的值，和默认的slot互斥 | |
| show-error | boolean | false | 否 | 用在Form表单组件里面，在表单校验出错的时候是否把Cell标为warn状态 |
| prop | string | 否 | 用在Form表单组件里面，需要校验的表单的字段名 | |
| footer | string | 否 | Cell右侧区域的内容，和名为footer的slot互斥 | |
| inline | boolean | 否 | 用在Form表单组件里面，表示表单项是左右显示还是上下显示 |
Slot
| 名称 | 描述 |
|---|---|
| icon | 左侧图标slot |
| title | 标题slot |
| 默认 | 内容slot |
| footer | 右侧区域slot |