skills.rest
ruan-cat
ruan-catCOMMUNITY
Explore all skills by this author →
GitHub

z-paging-integration

Integrate z-paging with Alova useRequest callbacks for paginated list loading.

Updated Sep 11, 2025
Search Tags:#pagination#reload#infinite-scroll#uniapp#alova#z-paging#userequest
One-click install
npx skills add https://github.com/ruan-cat/11comm-app --skill z-paging-integration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: z-paging-integration
Source: https://github.com/ruan-cat/11comm-app/tree/main/.claude/skills/z-paging-integration
Command: npx skills add https://github.com/ruan-cat/11comm-app --skill z-paging-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a concrete, safe integration pattern for combining the z-paging pagination component with Alova useRequest callbacks so pages load correctly, avoid infinite loops, and surface consistent loading/error states.

Core Features & Use Cases

  • Enforces the api-migration conventions: useRequest with immediate:false and callback-based onSuccess/onError handling.
  • Prevents common pitfalls such as try/catch inside @query, calling reload/refresh inside @query, and duplicate global prop configuration.
  • Standardizes UX expectations by requiring a loading slot using z-paging-loading and by calling complete() or complete(false) to notify z-paging of request results.
  • Typical use cases: repair order lists, housing/selector lists, activity lists, ticketing/complaint lists with server-side pagination and filters.

Quick Start

Integrate z-paging by wiring @query to useRequest.send with immediate:false, call complete() in onSuccess and complete(false) in onError, and trigger initial pagingRef.reload() from onMounted (never call reload/refresh from inside @query).

Frequently Asked Questions about z-paging-integration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I integrate z-paging with Alova useRequest for infinite scroll in uniapp?▼

To integrate z-paging with Alova useRequest, wire the @query event to useRequest.send with immediate:false, call complete() in onSuccess and complete(false) in onError, and trigger reload() from onMounted.

Why does my z-paging list get stuck in an infinite loop when using Alova useRequest?▼

An infinite loop occurs when calling reload or refresh inside the @query event. You must trigger the initial pagingRef.reload() from onMounted and use useRequest with immediate:false to prevent duplicate fetch cycles.

Can I use try/catch inside the z-paging @query event to handle Alova request errors?▼

No, you should not use try/catch inside the @query event. Handle Alova request errors via the useRequest onError callback, where you must call complete(false) to notify z-paging that the fetch failed.

What is the correct way to handle pull-to-refresh and server-side pagination with z-paging and useRequest?▼

Server-side pagination requires setting useRequest immediate:false, calling complete() with the loaded data in onSuccess, and configuring global z-paging props alongside a z-paging-loading slot for unified UX.

Does z-paging work with Alova useRequest for combined filtering on repair order or housing lists?▼

Yes, z-paging integrates with Alova useRequest for combined filtering on repair order, housing, and activity lists by enforcing callback-based onSuccess/onError handling to safely manage server-side pagination states.

How do I show a consistent loading state across uniapp pages using z-paging?▼

To ensure a consistent loading state, use a loading slot with the z-paging-loading component and define global z-paging props, allowing unified UX across all infinite scroll and paginated list views.

Related Skills

Explore More Software Engineering Skills→
ruan-catruan-cat

api-error-handling

Apply unified API error handling to Alova useRequest calls in uniapp Vue3 projects.

Community
Advanced
kaushal-waygoodkaushal-waygood

github-discussion-query

Query GitHub discussions and return structured JSON metadata or jq-filtered results.

Community
Intermediate
beavermoneybeavermoney
36

relay-pagination

Implement Relay cursor-based pagination with usePaginationFragment and load functions.

Official
Advanced
jiaiyanjiaiyan
21

el-infinite-scroll

Load more data automatically when users scroll to the bottom of Vue lists.

Community
Intermediate