GG

# gg-cell 纵向列表

gg-cell

列表页，一般用户列表业务使用，默认为实心白色背景。

在 script 中引用组件

若使用uni-app的 easycom 引入方式，则无需在script中重复引用

import ggCell from '@/components/gg-cell/gg-cell.vue'
export default {
    components: {ggCell}
}
1
2
3
4

在 template 中使用组件

    <gg-cell label="这是列表的标题" sublabel="副标题" />
    <gg-cell label="这是列表的标题" explain="提示内容提示内容提示内容提示内容提示内容提示内容提示内容" />
    <gg-cell label="这是列表的标题，如" explain="右边第一行" subexplain="右边第二行提示内容" />
    <gg-cell image="/static/logo.png" label="这是列表的标题" explain="提示内容" />
    <gg-cell image="/static/logo.png" label="这是列表的标题" explain="右边第一行" />
    <gg-cell image="/static/logo.png" label="绑定url地址跳转" url="/pages/layout/gg-cell?1=1" />
    <gg-cell image="/static/logo.png" label="关闭当前页面跳转" urlType='redirectTo' url="/pages/layout/gg-cell?1=1" />
    <gg-cell image="/static/logo.png" label="绑定@click自定义方法" @click="onClick('这是一个自定义方法')" />
1
2
3
4
5
6
7
8

# 属性说明

属性名 类型 默认值 说明
url String - 点击跳转地址
urlType String navigateTo 跳转类型：navigateTo (opens new window),redirectTo (opens new window)，reLaunch (opens new window)，switchTab (opens new window)
label String - 列表标题
sublabel String - 列表副标题
explain String - 列表说明
subexplain String - 列表第二行说明
image String - 图片
message String - 提示

# slot

具名 说明
before 一般用于：使用图标代替图片场景

# 事件说明

事件名 说明 返回值
@click 点击 Cell 触发事件

# 插件预览地址

信息提示 →