示例仅供参考,请以真机为主

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;
		})
	);
}
Last Updated: