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

前端 · 2024-07-27

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

}

Theme Jasmine by Kent Liao