创新互联小程序教程：微信小程序WeUI·Cell

Cell

Cell是列表或者是表单的一项，常用于设置页的展示，或者用在表单中，作为表单的每一个要填写的项，Cell必须要放在Cells组件的下面。

示例代码：

{
  "usingComponents": {
    "mp-cells": "../components/cells/cells",
    "mp-cell": "../components/cell/cell",
    "mp-slideview": "../components/slideview/slideview"
  }
}


    
        Cell
        列表
    
    
        
            
            
                标题文字（使用slot）
                说明文字

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

Slot

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

网站栏目：创新互联小程序教程：微信小程序WeUI·Cell
网站网址：http://www.shufengxianlan.com/qtweb/news36/385486.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容