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