WeChat gadget WeUI Cell
May 21, 2021 WeChat Mini Program Development Document
Table of contents
Cell
Cell is a list or an item of a form that is often used to set up a page presentation, or in a form where cell must be placed under the Cells component as each item to be filled out in the form.
Sample code:
{
"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)
}
});
The list of properties
| Property | Type | The default | Required | Description |
|---|---|---|---|---|
| ext-class | string | Whether | A class added to the internal structure of a component that can be used to modify the style inside a component | |
| icon | string | Whether | Cell's far left icon is the path to the local picture, and icon and the slot named icon are mutually exclusive | |
| title | string | Whether | Cell's far-left title, which is typically used in Form form components, is mutually exclusive with icon and title, title, and slot called title | |
| hover | boolean | false | Whether | Is there a hover effect? |
| link | boolean | false | Whether |
On the right is the jump arrow,
v1.0
version,
link: true
hover will come with its own effect
|
| value | string | Is | Cell values, and the default slot are mutually exclusive | |
| show-error | boolean | false | Whether | Used in the Form form component, mark Cell as a warn state when the form checks for errors |
| prop | string | Whether | Used in the Form form component, the field name of the form that needs to be verified | |
| footer | string | Whether | The contents of the area to the right of Cell are mutually exclusive with the slot named footer | |
| inline | boolean | Whether | Used in the Form form component to indicate whether the form item is displayed left or right or up or down |
Slot
| Name | Describe |
|---|---|
| icon | The icon on the left is slot |
| title | Title slot |
| Default | Content slot |
| footer | The right-hand area slot |