1.在插件市场,下载z-paging插件并导入项目
给全部内容框架加入插件的z-paging,其中的v-modle绑定的数据,也就是soupData,paging对象也要去定义一个,queryList网络数据请求方法
<z-paging ref="paging" v-model="soupData" @query="queryList">
<view class="headTop">
<view class="title">我的鸡汤</view>
<navigator url="/pages_self/soup/edit" class="btn">+熬制鸡汤</navigator>
</view>
<view class="list">
<view class="item" v-for="item in soupData" :key="item._id">
<soup-item :item="item"></soup-item>
</view>
</view>
</z-paging>
然后把以前的直接调用请求数据getSoupList方法放在querylist方法中,因为querlist有两个插件参数,我们可以传入到我们写的getSoupList方法里面,然后根据获取的pagesize来限制列表每次显示的条数,用到limit(pageSize),在定义一个skip变量,为每次下拉获取要跳过之前已经获取的数据,显示新的条数,pageno是从1增加的,所以我们要减一来使得第一次不跳过,第二次跳过10条,第三次跳过20条。。。。
以前是直接赋值soupdata中,现在直接paging.value.complete(data);传值到paging中,paging又与soupdata进行v-model进行双向绑定数据一样,但是这样做才能使用下拉刷新,满足作者插件需求
import {
ref
} from 'vue';
const soupData = ref([]);
const paging= ref([]);
const db = uniCloud.database();
const queryList=(pageNo, pageSize)=>{
getSoupList(pageNo,pageSize);
console.log(pageNo,pageSize);
}
const getSoupList = async (pageNo,pageSize) => {
let skip=(pageNo - 1)*pageSize;
let {
result: {
errCode,
data
}
} = await db.collection("soup-chicken").orderBy("publish_date", 'desc').limit(pageSize).skip(skip).get();
if (errCode != 0) return;
paging.value.complete(data);
}
uni.$on("soupData", (e) => {
getSoupList()
});
3.使用插件带的固定插槽,来固定上面我的鸡汤栏,是他固定不滑动
<template #top></template>
使用
<template #top>
<view class="headTop">
<view class="title">我的鸡汤</view>
<navigator url="/pages_self/soup/edit" class="btn">+熬制鸡汤</navigator>
</view>
</template>
给调用云数据库加入try catch,这个paging.value.complete(false);能显示交互错误信息
try {
let {
result: {
errCode,
data
}
} = await db.collection("soup-chicken").orderBy("publish_date", 'desc').limit(pageSize).skip(skip)
.get();
if (errCode != 0) return;
paging.value.complete(data);
} catch (e) {
paging.value.complete(false);
}
}