z-paging 的使用 uniapp+vue3脚手架-编程知识

z-paging 的使用 uniapp+vue3脚手架

uniapp 中没有合适的分页插件，所以找到了 z-paging的分页插件使用，这里记录一下用法
本人记录的开发项目是在小程序中使用的

安装（因为本人使用的uniapp是脚手架方式的）

npm install z-paging --save

配置 page.json easycom

"easycom": {"custom": {"^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue"}
}

3.使用
说明， z-paging 默认是占满整个页面的，它会挡住页面的其它元素，所以，我们要把所有的元素写在 z-paging 的组件里
在这里插入图片描述
如果不希望铺满屏幕，有两种方法解决
一种方法是设置 use-page-scroll 这种方式还要引入另外一个组件

上面的例子中使用的是 HbuilderX 来引入的，本人使用的是脚手架，所以是这样的

import {onLoad,onPageScroll, onReachBottom } from "@dcloudio/uni-app";
import UseZPaging from "z-paging/components/z-paging/js/hooks/useZPaging";
const paging = ref(null)
UseZPaging(paging)

第二种方法（也是我项目中使用方法）
在这里插入图片描述

第一次进入时加载了两次

项目中没有问题的代码

<template><view class="orderwrapper"><tabs:activeStyle="{fontWeight: 'bold',transform: 'scale(1.1)'}"lineWidth:40:data="tablist"v-model="active"lineColor="#27C172"@change="tabchange"></tabs><view class="listwrapper"><z-paging default-page-no="1"  :auto="false" default-page-size&#