• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 WeUI·Cell

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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



鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序 WeUI·Cells发布时间:2022-02-02
下一篇:
微信小程序 WeUI·FormPage发布时间:2022-02-02
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap