官网文档：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.vue template页代码：
<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.vue script页代码：
<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()即可
const queryList = 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>