# 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
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
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
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, |