官网文档z-paging。该组件可以实现下拉刷新、上拉分页加载数据、返回顶部等功能。使用该组件前需要注意的地方。z-paging默认铺满全屏此时页面所有view都应放在z-paging标签内否则会被盖住。处理分页时query所绑定的方法不要自己调用需要刷新列表数据时只需要调用paging.value.reload()即可。下拉刷新区带有图片要引用组件custom-refresher.vue。下拉刷新的动图gif可以到 icons8 下载素材。!-- z-paging自定义的下拉刷新view -- template view classrefresher-container !-- 这里的图片请换成自己项目的图片 -- image classrefresher-image modeaspectFit src/static/refresher_loading.gif/image text classrefresher-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; } /styleindex.vuetemplate页代码template view classwrap !-- 分页组件的引用 -- z-paging refpaging v-modeldata.order_list loading-more-no-more-text我也是有底线的 :auto-show-back-to-toptrue :back-to-top-style {right:60rpx} queryqueryList template #refresher {refresherStatus} custom-refresher :statusrefresherStatus/custom-refresher /template !-- 滑动时置顶固定的内容 -- up-sticky bgColor#fff view classsearch up-search placeholder请输入手机号 shaperound inputAligncenter height36 borderColor#1aad1a :clearabledtrue v-modeldata.search_phone :show-actionfalse clearclearSearchValue searchsearchPhone /up-search /view view classtabs up-tabs :listtabs_list clicktabclickFun lineWidth30 lineColor#1aad1a :activeStyle{ color: #303133, fontWeight: bold, transform: scale(1.05) } :inactiveStyle{ color: #606266, transform: scale(1) } itemStylepadding-left: 15px; padding-right: 15px; height: 34px; /up-tabs /view view classnum 总共text classtext{{data.total}}/text /view /up-sticky !-- 列表显示 -- view classcontent view classli v-for(item,index) in data.order_list :keyindex view classimg image classimage :srcspellImgUrlComputed(item?.pics?.url?.[0]) modeaspectFill :lazy-loadtrue/ /view view classright view classlabel view classname{{ item?.uname }}/view view classrole{{ item?.juese }}/view view classstatus up-text prefixIcontags-fill :iconStyle{color:#ffca28} size12 typeprimary text未结案 v-ifitem?.isfinish 0/up-text up-text prefixIcontags-fill :iconStyle{color:#ffca28} size12 typeerror text已结案 v-else/up-text /view /view view classbtns up-button typesuccess sizesmall iconeye text查看/up-button up-button typeprimary sizesmall iconskip-forward-right text跟进 clickopenGJJLFun(item.id,item.uname)/up-button /view /view /view /view /z-paging /view /templateindex.vuescript页代码script setup langtsimport { ref,reactive } from vue;import { onLoad } from dcloudio/uni-app;import {allOrderlistApi} from /service/customerApiimport customRefresher from /components/custom-refresher/custom-refresher.vueconst 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, //默认是1size:pageSize, //默认是10phone:data.value.search_phone}let res:any await allOrderlistApi(params)//发起请求console.log(渲染数据,res);uni.hideLoading();if(res.code 1){data.value.total res.totallet 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.ccreturn /^http/.test(value) ? value : baseurlvalue}else{return https://xxx.xxx.cc/static/picture/img_null.png; // 没有图片默认显示一个空图代替显示}}/script