【四】鸡汤来咯开发学习笔记-55

关掉自动加载<z-paging ref="paging" v-model="dataList" @query="queryList" :auto="false">

定义一个对象const firstLoad =ref(false);

用watch进行监听

watch(()=>props.currentIndex,(nv,ov)=>{    //nv表示currentIndex现在的数据，ov是过去
    if(nv==props.tabIndex){
        if(!firstLoad.value){    //只有第一次可以，防止每页重复执行
            nextTick(()=>{  //等上面的值被操作完成后才开始，就是执行了一次，下面那个函数会改变firstload的值，因为一直监听，所以我们等他完全改变再开始
                setTimeout(()=>{
                    paging.value.reload();  //因为关闭了auto，所以这里重新加载
              },100)
            })
        }
    }
},{
    immediate:true  //直接立即执行，不需要其他操作，一来的时候开始加载
})

这里面加入firstLoad.value=true;这样执行后，这一页就不会再reload了

async function getSoupList(pageNo,pageSize){
    let skip =(pageNo -1)*pageSize
    let{result:{data,errCode}}=await db.collection("soup-chicken").where({status:statList[props.tabIndex].value}).orderBy("publish_date",'desc').skip(skip).limit(pageSize).get();
    if(errCode!=0) return;
    paging.value.complete(data);
    firstLoad.value=true;
}
</script>

improt point：

因为soup-item是个组件，所以再list页面第二页滑动调用时，又是重新调用这个组件，所以firstLoad.value会重置1！！！！！！！！！

3.在此插件里面加入加载z-paging的加载组件

<template #loading>
                <uni-load-more status="loading"></uni-load-more>
            </template>