GG

# gg-tab-lists 自带tab的列表页

gg-tab-lists

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

在 script 中引用组件

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

import ggTabLists from '@/components/gg-tab-lists/gg-tab-lists.vue'
export default {
    components: {ggTabLists}
}
1
2
3
4

在 vue 中使用组件

<template>
    <view>
        <gg-tab-lists :tabsConfig="tabsConfig">
          <template #default="{rows,index,tabIndex}">
            <!-- ... -->
          </template>
        </gg-tab-lists>
    </view>
</template>
1
2
3
4
5
6
7
8
9
export default {
    data(){
        return {
            tabsConfig:[{
                tabTitle:'切换卡',
                apiFunc:getData,
                apiParam:{}
            }],
        };
    },
    methods: {
        getData :(params) => {
            return new Promise((resolve, reject) => {
                let data = [];
                /* 模拟请求500毫秒拿到数据 */
                setTimeout(() => {
                    if (params.page > 3) {
                        resolve({ data: data });
                    } else {
                        for (let i = 0; i < params.pagesize; ++i) {
                            data.push({ title: params.tabTitle, info: '此处为演示内容' });
                        }
                        resolve({ data: data });
                    }
                }, 500)
            })
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

注意

如果：需要在这个组件的插槽中使用其他组件
那么：你需要单独 import 引用插槽内的组件
因为： easycom 的引用方式对微信小程序不支持

# 属性说明

属性名 类型 默认值 必填 说明
tabsConfig Array - 是 tab数组
disableTouch Boolean false 否 是否关闭左右滑动，单列时建议开启
disableTab Boolean false 否 是否关闭tab区域，单列时建议开启
disableEnabled Boolean false 否 是否禁止下拉刷新
onUpdate Number - 否 监听更新数据通知 ,建议传入当前时间戳
listsClass String - 否 组件额外class
publicParam Object - 否 每列数据请求接口通用 param
publicFunc Function - 否 每列数据请求通用方法
tabIndex Number 0 否 默认显示列的Key

# tabsConfig 的结构

属性名 类型 默认值 说明
tabTitle String - tab名称
apiFunc Function - 自定义方法；小程序接收不到
apiUrl String - api地址(不推荐使用)
apiParam Object - 接口请求地址的默认参数
apiFlag String - 接口请求地址的标识（当 publicFunc不为空时可选）
parseFunc Function - props.publicFunc 的第一个参数(非必填)
ordersort String DESC 排序策略['DESC','ASC']
pagesize Nember 10 页长
nodataMsg String - 没有数据提示符

# 事件说明

事件名 说明 返回值
@change 监听tab变化 当前tab的key
@dataLists 监听tab请求数据的变化 当前tab的最新数据

# default插槽接收参数 {rows,index,tabIndex} 说明

属性名 说明
rows 当前列的全部数据，来自你的API
index 当前列rows的index
tabIndex 当前列的index，

# 插件预览地址

← Box 布局 →