微信小程序 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)
    }
});

属性列表

Slot