微信小程序 WeUI·Cell
2020-07-28 09:56 更新
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 |
以上内容是否对您有帮助:
更多建议: