List 列表

概述

基础布局组件

使用指南

在.vue中引入组件

<script>
    import 'iCellGroup' from 'iview-mpvue/dist/components/cell-group/cell-group'
    import 'iCell' from 'iview-mpvue/dist/components/cell/cell'
    export default {
        components: {
            'i-cell-group': iCellGroup,
            'i-cell': iCell
        }
    }
</script>

在main.js中引入样式文件

import 'iview-mpvue/dist/components/cell/style/css'
import 'iview-mpvue/dist/components/cell-group/style/css'

示例

<i-cell-group>
    <i-cell title="只显示箭头" is-link="true"></i-cell>
    <i-cell title="跳转到首页" is-link="true" url="/pages/dashboard/index"></i-cell>
    <i-cell title="只有 footer 点击有效" is-link="true" url="/pages/dashboard/index" only-tap-footer="true"></i-cell>
    <i-cell title="开关">
        <switch slot="footer" checked="true" />
    </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 跳转	Boolean	false
url	当 isLink 设置为 true 时，点击 cell 会尝试跳转到该路径	String	-
link-type	链接类型，可选值为 navigateTo，redirectTo，switchTab，reLaunch	String	navigateTo

Cell events

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

Cell slot

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