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">
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=&quo
1.在list中在数据库查询中使用orderBy来进行排序，从而使最新发布的在上面//desc是倒叙，asc是正序，根据填写的前一个属性进行排序let{result:{errCode,data}} =await db.collection("soup-chicken").orderBy("publish_date",'desc').get(); 2.使用uni.navigateBack()当edit按钮提交成功后返回我的鸡汤列表，中间加入settimeout，用于展示首位。toast完全后跳走setTimeout(()=>uni.navigateBack(),1000) 3.使用全局监听事件，当发布后，跳转回我的鸡汤列表时，进行刷新//监听是全局的，这里其他文件也能进行on监听的在edit中 uni.$emit("soupData",{msg:"更新了"});创建监听事件，后面这个msg是个传值，这里可有可无 在list中获取监听事件，当事件触发进行监听，获取soup列表，以获得刷新作用
1.从数据库中拿去鸡汤内容放到list中（我的鸡汤）先创建方法getshoplist和变量数组soupdata来获取云数据库数据，保存到此变量中import { ref } from 'vue'; const soupData =ref([]); const db=uniCloud.database(); const getSoupList=async() =>{ let{result:{errCode,data}} =await db.collection("soup-chicken").get(); if(errCode != 0)return; soupData.value=data } getSoupList();然后再在页面中绑定变量到组件上 //需要绑定key不然报错，key用云数据库每条数据的id就行，此处item已经就是soupdata中的每一项，然后绑定组件item属性就是这个item变量<view class="item" v-for="item in soupData"
1.在edit中加入提交鸡汤时的加载属性和提交时内容编辑组件无法使用import { ref } from 'vue'; import { showToast } from '../../utils/common'; import { stripHTML } from '../../utils/tools'; const db=uniCloud.database() //相当于链接云数据库 const formDate =ref({ soup_type:0, content:"", from:"", }) const disabled =ref(false); //此变量由上面页面组件进行绑定 const radioChange = (e)=>{ formDate.value.soup_type=Number(e.detail.value); } const onSubmit =async() =>{ disabled.value=true; uni.showLoading({
ikrins
