NCZY/WAI_Project_UNIX
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化 usePager 写法

Browse Source
This commit is contained in:
icssoa
2025-09-15 11:25:24 +08:00
parent 8b60579a31
commit 2b9f112b9f
4 changed files with 108 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
.vscode/template.code-snippets vendored
View File

@@ -97,8 +97,12 @@
"",
"const listViewRef = ref<ClListViewComponentPublicInstance | null>(null);",
"",
"const { refresh, listView, loading, loadMore } = usePager((params) => {",
" return request({ $1 });",
"const { refresh, listView, loading, loadMore } = usePager((params, { render }) => {",
" request({ $1 }).then((res) => {",
" if (res != null) {",
" render(res);",
" }",
" });",
"});",
"",
"async function onPull() {",

80
cool/hooks/pager.ts
View File

@@ -16,7 +16,7 @@ type PagerResponse = {
};
// 分页回调函数类型
type PagerCallback = (params: UTSJSONObject) => Promise<any>;
type PagerCallback = (params: UTSJSONObject, ctx: Pager) => void | Promise<void>;
// 分页器类
export class Pager {
@@ -48,52 +48,46 @@ export class Pager {
this.loading.value = false;
}
// 渲染数据
public render = (res: any) => {
const { list, pagination } = parse<PagerResponse>(res)!;
// 更新分页信息
this.page = pagination.page;
this.size = pagination.size;
this.total = pagination.total;
// 更新列表数据
if (this.params.page == 1) {
this.list.value = [...list];
} else {
this.list.value.push(...list);
}
// 更新加载完成状态
this.finished.value = this.list.value.length >= this.total;
// 完成加载
this.done();
};
// 刷新数据
public refresh = async (params: UTSJSONObject): Promise<UTSJSONObject> => {
return new Promise((resolve, reject) => {
// 合并参数
this.params = assign(this.params, params);
public refresh = async (params: UTSJSONObject) => {
// 合并参数
this.params = assign(this.params, params);
// 构建请求参数
const data = {
page: this.page,
size: this.size,
...this.params
};
// 构建请求参数
const data = {
page: this.page,
size: this.size,
...this.params
};
// 设置加载状态
this.loading.value = true;
// 开始加载
this.loading.value = true;
// 发起请求
this.cb!(data)
.then((res) => {
// 解析响应数据
const { list, pagination } = parse<PagerResponse>(res)!;
// 更新分页信息
this.page = pagination.page;
this.size = pagination.size;
this.total = pagination.total;
// 更新列表数据
if (data.page == 1) {
this.list.value = [...list];
} else {
this.list.value.push(...list);
}
// 更新加载完成状态
this.finished.value = this.list.value.length >= this.total;
resolve(res);
})
.catch((err) => {
reject(err);
})
.finally(() => {
this.loading.value = false;
});
});
// 发起请求
await this.cb!(data, this);
};
// 加载更多数据

118
pages/demo/data/list-view-refresh.uvue
View File

@@ -43,68 +43,66 @@ const listViewRef = ref<ClListViewComponentPublicInstance | null>(null);
let id = 0;
const { refresh, list, listView, loading, loadMore } = usePager((params) => {
return new Promise((resolve) => {
// 模拟请求
setTimeout(() => {
resolve({
list: [
{
id: id++,
title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒",
image: "https://unix.cool-js.com/images/demo/1.jpg"
},
{
id: id++,
title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景",
image: "https://unix.cool-js.com/images/demo/2.jpg"
},
{
id: id++,
title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好",
image: "https://unix.cool-js.com/images/demo/3.jpg"
},
{
id: id++,
title: "都市夜景霓虹闪烁，五彩斑斓光芒照亮城市营造梦幻般景象",
image: "https://unix.cool-js.com/images/demo/5.jpg"
},
{
id: id++,
title: "云雾缭绕的山间风光如诗如画让人心旷神怡，微风轻抚树梢带来阵阵清香，鸟儿在林间自由歌唱",
image: "https://unix.cool-js.com/images/demo/6.jpg"
},
{
id: id++,
title: "古老建筑与现代摩天大楼交相辉映，传统与现代完美融合创造独特城市景观",
image: "https://unix.cool-js.com/images/demo/7.jpg"
},
{
id: id++,
title: "广袤田野绿意盎然风光无限，金黄麦浪在微风中轻柔摇曳，农家炊烟袅袅升起",
image: "https://unix.cool-js.com/images/demo/8.jpg"
},
{
id: id++,
title: "璀璨星空下银河横跨天际，繁星闪烁神秘光芒营造浪漫夜空美景",
image: "https://unix.cool-js.com/images/demo/9.jpg"
},
{
id: id++,
title: "雄伟瀑布从高耸悬崖飞流直下激起千层浪花，彩虹在水雾中若隐若现如梦如幻",
image: "https://unix.cool-js.com/images/demo/10.jpg"
}
],
pagination: {
page: params["page"],
size: params["size"],
total: 100
const { refresh, list, listView, loading, loadMore } = usePager((params, { render }) => {
// 模拟请求
setTimeout(() => {
render({
list: [
{
id: id++,
title: "春日樱花盛开时节，粉色花瓣如诗如画般飘洒",
image: "https://unix.cool-js.com/images/demo/1.jpg"
},
{
id: id++,
title: "夕阳西下的海滩边，金色阳光温柔地洒在波光粼粼的海面上，构成令人心旷神怡的日落美景",
image: "https://unix.cool-js.com/images/demo/2.jpg"
},
{
id: id++,
title: "寒冬腊月时分，洁白雪花纷纷扬扬地覆盖着整个世界，感受冬日的宁静与美好",
image: "https://unix.cool-js.com/images/demo/3.jpg"
},
{
id: id++,
title: "都市夜景霓虹闪烁，五彩斑斓光芒照亮城市营造梦幻般景象",
image: "https://unix.cool-js.com/images/demo/5.jpg"
},
{
id: id++,
title: "云雾缭绕的山间风光如诗如画让人心旷神怡，微风轻抚树梢带来阵阵清香，鸟儿在林间自由歌唱",
image: "https://unix.cool-js.com/images/demo/6.jpg"
},
{
id: id++,
title: "古老建筑与现代摩天大楼交相辉映，传统与现代完美融合创造独特城市景观",
image: "https://unix.cool-js.com/images/demo/7.jpg"
},
{
id: id++,
title: "广袤田野绿意盎然风光无限，金黄麦浪在微风中轻柔摇曳，农家炊烟袅袅升起",
image: "https://unix.cool-js.com/images/demo/8.jpg"
},
{
id: id++,
title: "璀璨星空下银河横跨天际，繁星闪烁神秘光芒营造浪漫夜空美景",
image: "https://unix.cool-js.com/images/demo/9.jpg"
},
{
id: id++,
title: "雄伟瀑布从高耸悬崖飞流直下激起千层浪花，彩虹在水雾中若隐若现如梦如幻",
image: "https://unix.cool-js.com/images/demo/10.jpg"
}
});
],
pagination: {
page: params["page"],
size: params["size"],
total: 100
}
});
ui.hideLoading();
}, 1000);
});
ui.hideLoading();
}, 1000);
});
async function onPull() {

9
pages/template/shop/address.uvue
View File

@@ -86,12 +86,17 @@ import type { UserAddress } from "../types";
const ui = useUi();
const { refresh, list, loadMore } = usePager(async (data) => {
return request({
const { refresh, list, loadMore } = usePager(async (data, { render }) => {
await request({
url: "/app/user/address/page",
method: "POST",
data
})
.then((res) => {
if (res != null) {
render(res);
}
})
.catch((err) => {
ui.showToast({
message: (err as Response).message!