更新记录
1.0.2(2023-05-11)
下载此版本
1.0.1(2023-05-11)
下载此版本
1.0.0(2023-05-11)
下载此版本
查看更多
平台兼容性
uni-app
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| - |
√ |
√ |
√ |
- |
- |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
其他
jc-pager 分页
自定义加载更多
使用
// import { onReachBottom } from '@dcloudio/uni-app'
// 默认reachToLowerEvent使用的是onReachBottom,可以自定义
function promise() {
// return Promise.resolve({data: {count: 0, list: []}})
// return Promise.reject({message: '这里是错误信息'})
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
data: {
count: 100,
list: new Array(20).fill(0).map(d => Math.random())
}
})
}, 1000)
})
}
<jc-pager :promise="promise" :autoLoad="true">
<template #default="{list, total, loading, done, error}">
<view class="p-4 m-1 bg-white" v-for="d, i in list" :key="i">
[{{i + 1}}] : {{d}}
</view>
</template>
</jc-pager>
props
| 参数 |
类型 |
默认值 |
说明 |
| promise |
Function |
- |
Promise |
| params |
Object |
{} |
request参数 |
| autoLoad |
Boolean |
false |
自动加载首屏数据 |
| reachToLowerEvent |
Function |
- |
自定义触底事件 |
| listDataName |
String |
data.list |
列表数据字段名称 |
| listRecordName |
String |
data.count |
记录总数数据字段名称 |
| pageName |
String |
page |
分页名称 |
| page |
Number |
1 |
开始页数 |
| limitName |
String |
limit |
每页条数名称 |
| limit |
Number |
20 |
每页返回数量 |
slot
| 名称 |
scope |
说明 |
| default |
{list,total,loading,done,error} |
- |
| error |
- |
错误 |
| loading |
- |
加载中 |
| done |
- |
加载完毕 |
| empty |
- |
空 |
emit
| 事件名称 |
说明 |
| onReachToLower |
触底时触发 |
expose
| 名称 |
类型 |
说明 |
| init |
Function |
获取数据 |
| reset |
Function |
reset |
重置 |