usePager 分页

使用

import { usePager } from "/@/cool";

const { pager, Loading, Finished, Loadmore, List, onData, onRefresh } = usePager();

名称	说明	类型	可选值	默认值
pager	分页	object
pager.list	数据列表	array
pager.pagination	分页信息	object
pager.params	请求参数	object
Loading	是否加载中	boolean
Finished	是否加载完成	boolean
Loadmore	是否加载更多	boolean
List	数据列表	array
onData	新数据时触发	function(cb: (list) => void)
onRefresh	刷新时触发，配置请求	function(params:any, { clear, loading })

注意以下几点：

• 刷新方法必须命名为 refresh

function refresh(params?: any) {
	// 获取值
	const { data, next } = onRefresh(params);

	// 绑定对应的服务
	next(service.xxx(data));
}

• 必须使用 defineExpose 暴露 refresh 方法

defineExpose({
	refresh
});

• 标签循环列表的值使用 List

<cl-list-item v-for="(item, index) in List" :key="index" :label="item.label" />

• 页面开启下拉刷新

{
    "style": {
        "enablePullDownRefresh": true
    }
},

• 已配置好 onPullDownRefresh 下拉刷新，onReachBottom 上拉加载，无需手动添加。

示例

• refresh 的作用在于配置请求的参数及方法。
• params 为外部传入的值，
• data 为合并后的值（包含分页参数）
• next 为请求操作，接收一个 Promise<{list, pagination}>

<template>
    <cl-page>
        <view class="page-test">
            <cl-list>
                <cl-list-item v-for="(item, index) in List" :key="index" :label="item.label" />
            </cl-list>
        </view>
    <cl-page>
</template>

<script lang="ts" setup>
	import { onReady } from "@dcloudio/uni-app";
	import { usePager, useCool } from "/@/cool";
	const { pager, Loading, Finished, Loadmore, List, onData, onRefresh } = usePager();
	const { service } = useCool();

	// 刷新方法
	function refresh(params?: any) {
		// 获取值
		const { data, next } = onRefresh(params);

		// 绑定对应的服务
		next(service.test.page(data));
	}

	// 首次刷新
	onReady(() => {
		refresh();
	});

	// 暴露方法
	defineExpose({
		refresh
	});
</script>

自定义请求

next 中返回 Promise 格式即可

function refresh(params?: any) {
	// 获取值
	const { data, next } = onRefresh(params);

	next(
		new Promise((resolve) => {
			// 你的逻辑处理，如：
			uni.request({
				url: "https://xxxx",
				success() {
					// 返回格式
					resolve({
						// 数据列表
						list: [],

						// 分页信息
						pagination: {
							page: 1,
							size: 20,
							total: 0
						}
					});
				}
			});
		})
	);
}

修改返回的数据

有这么一个需求，返回的 pics 是 , 拼接的多图字段，需要转成数组后再标签上绑定：

function refresh(params?: any) {
	// 获取值
	const { data, next } = onRefresh(params);

	// 绑定对应的服务
	next(
		service.test.page(data).then((res) => {
			// 分割 pics
			res.list.map((e) => {
				e.pics = e.pics.split(",");
			});

			return res;
		})
	);
}