官网文档：z-paging。
该组件可以实现下拉刷新、上拉分页加载数据、返回顶部等功能。
使用该组件前，需要注意的地方。
- z-paging默认铺满全屏，此时页面所有view都应放在z-paging标签内，否则会被盖住。
- 处理分页时，@query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可。
下拉刷新区带有图片，要引用组件custom-refresher.vue。下拉刷新的动图gif，可以到 icons8 下载素材。
<!-- z-paging自定义的下拉刷新view --> <template> <view class="refresher-container"> <!-- 这里的图片请换成自己项目的图片 --> <image class="refresher-image" mode="aspectFit" src="@/static/refresher_loading.gif"></image> <text class="refresher-text">{{statusText}}</text> </view> </template> <script> export default { data() { return { }; }, computed: { statusText() { // 这里可以做i18n国际化相关操作，可以通过uni.getLocale()获取当前语言(具体操作见i18n-demo.vue); // 获取到当前语言之后，就可以自定义不同语言下的展示内容了 const statusTextArr = ['哎呀，用点力继续下拉！', '拉疼我啦，松手刷新~~', '正在努力刷新中...', '刷新成功啦~']; return statusTextArr[this.status]; } }, props: { status: { type: Number, default: function() { return 0; }, }, } } </script> <style scoped> .refresher-container { /* #ifndef APP-NVUE */ display: flex; /* #endif */ height: 150rpx; flex-direction: column; align-items: center; justify-content: center; } .refresher-image { margin-top: 10rpx; height: 45px; width: 45px; } .refresher-text { margin-top: 10rpx; font-size: 24rpx; color: #666666; } </style>index.vuetemplate页代码：
<template> <view class="wrap"> <!-- 分页组件的引用 --> <z-paging ref="paging" v-model="data.order_list" loading-more-no-more-text="我也是有底线的！" :auto-show-back-to-top="true" :back-to-top-style = "{right:'60rpx'}" @query="queryList" > <template #refresher = "{refresherStatus}"> <custom-refresher :status="refresherStatus"></custom-refresher> </template> <!-- 滑动时置顶固定的内容 --> <up-sticky bgColor="#fff"> <view class="search"> <up-search placeholder="请输入手机号" shape="round" inputAlign="center" height="36" borderColor="#1aad1a" :clearabled="true" v-model="data.search_phone" :show-action="false" @clear="clearSearchValue" @search="searchPhone"> </up-search> </view> <view class="tabs"> <up-tabs :list="tabs_list" @click="tabclickFun" lineWidth="30" lineColor="#1aad1a" :activeStyle="{ color: '#303133', fontWeight: 'bold', transform: 'scale(1.05)' }" :inactiveStyle="{ color: '#606266', transform: 'scale(1)' }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" > </up-tabs> </view> <view class="num"> 总共：<text class="text">{{data.total}}</text> </view> </up-sticky> <!-- 列表显示 --> <view class="content"> <view class="li" v-for="(item,index) in data.order_list" :key="index"> <view class="img"> <image class="image" :src="spellImgUrlComputed(item?.pics?.url?.[0])" mode="aspectFill" :lazy-load="true"/> </view> <view class="right"> <view class="label"> <view class="name">{{ item?.uname }}</view> <view class="role">{{ item?.juese }}</view> <view class="status"> <up-text prefixIcon="tags-fill" :iconStyle="{color:'#ffca28'}" size="12" type="primary" text="未结案" v-if="item?.isfinish == 0"></up-text> <up-text prefixIcon="tags-fill" :iconStyle="{color:'#ffca28'}" size="12" type="error" text="已结案" v-else></up-text> </view> </view> <view class="btns"> <up-button type="success" size="small" icon="eye" text="查看"></up-button> <up-button type="primary" size="small" icon="skip-forward-right" text="跟进" @click="openGJJLFun(item.id,item.uname)"></up-button> </view> </view> </view> </view> </z-paging> </view> </template>index.vuescript页代码：
<script setup lang="ts">
import { ref,reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import {allOrderlistApi} from '@/service/customerApi'
import customRefresher from '@/components/custom-refresher/custom-refresher.vue'
const data = ref({
search_phone:'',
cur_status:0,
total:0,
order_list:[] //数据列表
})
const paging = ref()
const tabs_list = reactive([
{ value:0,name: '全部' },
{ value:1,name: '未跟进' },
{ value:2,name: '已跟进' },
{ value:3,name: '未分配' },
{ value:4,name: '已结案' },
{ value:5,name: '已退回' },
]);
// 根据手机号搜索订单
const searchPhone = ()=> {
// 手机正则校验
paging.value.reload()//刷新列表数据
}
const clearSearchValue = ()=> {
data.value.search_phone = ''
paging.value.reload()//刷新列表数据
}
// 切换tabs选项卡
function tabclickFun(item:any) {
console.log('tabclickFun', item);
data.value.cur_status = item.value;
paging.value.reload()//刷新列表数据
}
// 处理分页
// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用paging.value.reload()即可
constqueryList= async (pageNo:number, pageSize:number) => {
uni.showLoading({
title: '加载中...',
mask: true, // 是否显示透明蒙层，防止触摸穿透
});
let params = {
index:data.value.cur_status,
page:pageNo, //默认是1
size:pageSize, //默认是10
phone:data.value.search_phone
}
let res:any = await allOrderlistApi(params)//发起请求
console.log('渲染数据',res);
uni.hideLoading();
if(res.code == 1){
data.value.total = res.total
let data_ = res.data.map((item:any,index:number) => {
if(item.pics != ''){
res.data[index].pics = JSON.parse(item.pics)
}
return item;
});
paging.value.complete(data_)
}else{
paging.value.complete(null)
}
}
// 图片补充长链接
function spellImgUrlComputed(value:any){
if(value){
let baseurl = 'https://xxx.xx.cc'
return /^http/.test(value) ? value : baseurl+value
}else{
return 'https://xxx.xxx.cc/static/picture/img_null.png'; // 没有图片，默认显示一个空图代替显示
}
}
</script>
