List 列表

List 列表

概述

基础布局组件。

使用指南

在 .json 中引入组件

"usingComponents": {
    "i-cell-group": "../../dist/cell-group/index",
    "i-cell": "../../dist/cell/index"
}

示例

<i-cell-group>
    <i-cell title="只显示箭头" is-link></i-cell>
    <i-cell title="跳转到首页" is-link url="/pages/dashboard/index"></i-cell>
    <i-cell title="只有 footer 点击有效" is-link url="/pages/dashboard/index" only-tap-footer></i-cell>
    <i-cell title="开关">
        <switch slot="footer" checked />
    </i-cell>
</i-cell-group>

API

CellGroup properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-

Cell properties

属性	说明	类型	默认值
i-class	自定义 class 类名	String	-
title	左侧标题	String	-
label	标题下方的描述信息	String	-
value	右侧内容	String	-
only-tap-footer	只有点击 footer 区域才触发 tab 事件	Boolean	false
is-link	是否展示右侧箭头并开启尝试以 url 跳转	null	-
url	当 isLink 设置为 true 时，点击 cell 会尝试跳转到该路径	String	-
link-type	链接类型，可选值为 navigateTo，redirectTo，switchTab，reLaunch	String	navigateTo

Cell events

事件名	说明	返回值
bind:click	点击 cell 时触发，onlyTapFooter 为 true 时点击 footer 区域触发	-

Cell slot

名称	说明
默认	自定义内容
icon	标题前自定义的 icon，可使用 icon 自定义组件，具体使用参考 icon 组件
footer	右侧自定义 wxml 内容，如果设置了 value 属性，则不生效