【二】鸡汤来咯开发学习笔记-32

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);
}

}