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

1.下载官方拓展组件load-more在配合z-paging组件给list页面加入一个内容加载前的动画

<template #loading>
                <uni-load-more status="loading"></uni-load-more> //staus类型为loading
            </template>

2.给list加入安全区域，直接加入属性就行，这个z-paging骚插件自己带有（safe-area-inset-bottom）

<z-paging ref="paging" safe-area-inset-bottom v-model="soupData" @query="queryList">

3.完善soup-item中的点赞收藏评论量与云数据库连接上（其中v-if是如果数量为0，就为false也就不显示了）

<view class="group">
                    <view class="every">
                        <uni-icons type="heart" color="#a7a7a7" size="16"></uni-icons>
                        <text class="font" v-if="item.like_count">{{item.like_count}}</text>
                    </view>
                    <view class="every">
                        <uni-icons type="star" color="#a7a7a7" size="16"></uni-icons>
                        <text class="font" v-if="item.collect_count">{{item.collect_count}}</text>
                    </view>
                    <view class="every">
                        <uni-icons type="chatbubble" color="#a7a7a7" size="16"></uni-icons>
                        <text class="font" v-if="item.comment_count">{{item.comment_count}}</text>
                    </view>
                </view>

4.在list页面使用field,在查询数据库时，获取需要的字段，避免安全和流量的浪费

await db.collection("soup-chicken").field("publish_date,content,soup_type,like_count,collect_count,comment_count").orderBy("publish_date", 'desc').limit(pageSize).skip(skip)

5.以前的返回刷新不能用了，适配z-paging插件，使用paging.value.reload()

uni.$on("soupData", (e) => {

paging.value.reload();  //会重置pageNo, pageSize

});