阅读(448) (0)

微信小程序 WeUI·Cell

2020-07-27 14:58:50 更新

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-classstring添加在组件内部结构的class,可用于修改组件内部的样式
iconstringCell的最左侧的icon,是本地图片的路径,icon和名为icon的slot互斥
titlestringCell最左侧的标题,一般用在Form表单组件里面,icon和title二选一,title和名为title的slot互斥
hoverbooleanfalse是否有hover效果
linkbooleanfalse右侧是有跳转的箭头,v1.0后的版本,link: true 会自带 hover 效果
valuestringCell的值,和默认的slot互斥
show-errorbooleanfalse用在Form表单组件里面,在表单校验出错的时候是否把Cell标为warn状态
propstring用在Form表单组件里面,需要校验的表单的字段名
footerstringCell右侧区域的内容,和名为footer的slot互斥
inlineboolean用在Form表单组件里面,表示表单项是左右显示还是上下显示

Slot

名称描述
icon左侧图标slot
title标题slot
默认内容slot
footer右侧区域slot