微信小程序 WeUI·Cell

Cell

Cell是列表或者是表單的一項(xiàng)，常用于設(shè)置頁的展示，或者用在表單中，作為表單的每一個(gè)要填寫的項(xiàng)，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="帶說明的列表項(xiàng)">
            <mp-cell value="標(biāo)題文字" footer="說明文字"></mp-cell>
            <mp-cell>
                <view>標(biāo)題文字（使用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="帶圖標(biāo)、說明的列表項(xiàng)" footer="底部說明文字">
            <mp-cell value="標(biāo)題文字" footer="說明文字">
                <image slot="icon" src="{{icon}}" style="margin-right: 16px;vertical-align: middle;width:20px; height: 20px;"></image>
            </mp-cell>
            <mp-cell value="標(biāo)題文字" 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="帶跳轉(zhuǎn)的列表項(xiàng)">
            <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效果，帶跳轉(zhuǎn)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