1.认识 z-paging
新手在开发 uniapp 项目的时候，会遇到3个难题：
- 1.页面布局：头部和尾部固定，中间滚动
- 2.下拉刷新、上拉加载分页功能
- 3.处理空数据图
如果要自己处理这3个问题，费时费力不说，每个页面都会有大量冗余的代码。
而今天要介绍的 uniapp 插件 z-paging 完美解决了这3个问题。
z-paging 是一个 uni-app 分页组件。 全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等。
z-paging 官网：
https://z-paging.zxlee.cn/start/intro.html
2. 安装 z-paging
z-paging 官方插件地址：
https://ext.dcloud.net.cn/plugin?id=3935
建议直接导入 HbuilderX 使用
3. 使用 z-paging
3.1 z-paging 包裹页面
<z-paging ref="paging" loading-more-no-more-text="咱也是有底线的！" :auto-show-back-to-top="true" v-model="blogDataList"
@query="queryList">
</z-paging>
- 1.绑定 ref
- 2.v-model 绑定分页列表数据
- 3.auto-show-back-to-top 显示返回顶部图标
- 4.@query 绑定分页查询方法
3.2 核心方法
- 1.queryList 方法里 pageNo 表示页码，pageSize 表示每页查询数量
- 2.paging.value.complete（） 表示让 z-paging 组件处理分页数据，关键代码！
// 绑定 paging
const paging = ref();
// 绑定 @query
const queryList = (pageNo, pageSize) => {
search.current = pageNo;
search.size = pageSize;
getDataList();
}
// 获取数据
const getDataList = async () => {
const {
data
} = await blogApi.getBlogList(search);
// 将后台返回的数据返回给 z-paging 组件
paging.value.complete(data.data.records);
}
3.3 页面布局
- top 头部布局代码
<template #top>
</template>
例如：
- bottom 底部布局代码
<template #bottom>
</template>
例1：
例2：
4. 完整代码
<template>
<view class="container">
<z-paging ref="paging" loading-more-no-more-text="咱也是有底线的！" :auto-show-back-to-top="true" v-model="blogDataList"
@query="queryList">
<!-- top -->
<template #top>
<!-- 自定义navbar -->
<uv-navbar leftIcon="" :fixed="false" bgColor="#f8f8f8" title="知否技术博客"></uv-navbar>
<!-- Tabs 标签选项卡 -->
<uv-tabs @change="changeTab" :scrollable="false" :list="tabList"></uv-tabs>
</template>
<!-- 内容 -->
<view class="content" v-if="blogDataList && blogDataList.length>0">
<uni-card v-for="(item,index) in blogDataList" :key="index" @click="toBlogDetail(item.id)"
:title="item.title" :is-shadow="false" :extra="timeFormat(item.createTime)">
<uv-row>
<uv-col span="3">
<uv-image src="https://picsum.photos/seed/picsum/300/300" width="50px"
height="50px"></uv-image>
</uv-col>
<uv-col span="9">
<text class="uv-line-2">{{item.content}}</text>
</uv-col>
</uv-row>
</uni-card>
</view>
<!-- bottom -->
<template #bottom>
<!-- 底部导航栏 -->
<tab-bar :itemValue="0"></tab-bar>
</template>
</z-paging>
</view>
</template>
<script setup>
import {reactive,ref} from 'vue';
import {onLoa} from "@dcloudio/uni-app"
import {timeFormat} from '@climblee/uv-ui/libs/function/index.js';
import blogApi from "@/api/blog/blog.js"
// tabList
const tabList = ref([{name: 'java'}, {name: 'vue}, {name: 'react'}, {
name: 'uniapp'
}, {
name: 'electron'
}, {
name: 'js'
}])
onLoad(() => {
getDataList();
})
// 博客数据
const blogDataList = ref([]);
const search = reactive({
current: 1,
size: 10,
type: "java",
})
const paging = ref();
const queryList = (pageNo, pageSize) => {
search.current = pageNo;
search.size = pageSize;
getDataList();
}
// 切换 Tab
const changeTab = (e) => {
search.type = e.name;
search.current = 1;
blogDataList.value = [];
getDataList();
}
const getDataList = async () => {
const {
data
} = await blogApi.getBlogList(search);
paging.value.complete(data.data.records);
}
// 进入到博客详情页面
const toBlogDetail = (id) => {
uni.navigateTo({
url: "/pages/blog/detail?blogId=" + id
})
}
</script>
<style lang="scss" scoped>
.foot {
height: 120rpx;
padding: 20rpx;
background-color: #FFFFFF;
}
</style>
