目录

一 
  
  
  
  
  
  、添加全部

1.在主页面中添加一列

 2.改云函数

3.插件市场导入 加载中组件

二 
  
  
  
  
  
  
、实现上拉加载

1.云函数中可以接收参数

2.获取下拉事件

3.写触发这个下拉干嘛

在 显示加载中的组件里面

一

 


 


 


 


 


 

、添加全部

1.在主页面中添加一列

data.unshift({ name:全部 }) //添加一列 ‘全部’

 2.改云函数

（累了 直接上代码）这里match匹配空对象相当于全部哈

use strict; const db=uniCloud.database()//1.创建引用 exports.main = async (event, context) => { //event为客户端上传的参数 const { name } = event//等同 var name=event.name let matchObj={} if (name !== 全部) { matchObj = { classify: name } } const list =await db.collection(article) //2.创建 .aggregate()//获取聚合操作实例 .match(matchObj)//筛选出classify是前端开发的 .project({ content:0 })//类似.field .end() return { code: 200, msg: 数据请求成功, data: list.data } };

3.插件市场导入 加载中组件

二 
 
 
 
 
 
 、实现上拉加载

上拉加载实际上把一页分成好几页来加载 
  
  
  
  
  
  ，拉一下就加载一点点 就这样

1.云函数中可以接收参数

use strict; const db=uniCloud.database()//1.创建引用 exports.main = async (event, context) => { //event为客户端上传的参数 const { name, page = 1, pageSize = 10 } = event//等同 var name=event.name let matchObj={} if (name !== 全部) { matchObj = { classify: name } } const list =await db.collection(article) //2.创建 .aggregate()//获取聚合操作实例 .match(matchObj)//筛选出classify是前端开发的 .project({ content:0 })//类似.field .skip(pageSize * (page - 1)) .limit(pageSize)//返回几条数据？ .end() return { code: 200, msg: 数据请求成功, data: list.data } };

2.获取下拉事件

<scroll-view class="list-scroll" scroll-y @scrolltolower="loadmore">

传呀传

methods:{ loadmore(){ this.$emit(loadmore) } }

传呀传

传到头啦

3.写触发这个下拉干嘛

loadmore() { if (this.load[this.activeIndex].loading === noMore) return this.load[this.activeIndex].page++ this.getList(this.activeIndex) },

getList里面

getList(current) { if (!this.load[current]) { this.load[current] = { page: 1, loading: loading } } //分离page 不能让他们共享一个 console.log(当前的页数, this.load[current].page); this.$api.get_list({ //传三个参数 name: this.tab[current].name, page: this.load[current].page, pageSize: this.pageSize }).then(res => { console.log(res); const { data } = res if (data.length === 0) { let oldLoad = {} oldLoad.loading = noMore oldLoad.page = this.load[current].page this.$set(this.load, current, oldLoad) // 强制渲染页面 this.$forceUpdate() return } let oldList = this.listCatchData[current] || [] oldList.push(...data) this.$set(this.listCatchData, current, oldList) }) }

完整代码：

<template> <swiper @change="change" :current="activeIndex" style="height: 100%"> <swiper-item style="height: 100%" v-for="(item ,index) in tab" :key="index" class="swiper-item"> <list-item :list="listCatchData[index]" :load="load[index]" @loadmore="loadmore"></list-item> </swiper-item> </swiper> </template> <script> export default { name: "list", props: { tab: { type: Array, default () { return [] } }, activeIndex: { type: Number, default: 0 } }, data() { return { list: [], // js 的限制 listCatchData[index] = data listCatchData: {}, load: {}, pageSize: 10 }; }, watch: { tab(newVal) { //如果是新的tab if (newVal.length === 0) return this.listCatchData = {} this.load = {} this.getList(this.activeIndex) } }, methods: { loadmore() { //if ‘没有更多数据’就返回 不申请啦 if (this.load[this.activeIndex].loading === noMore) return this.load[this.activeIndex].page++ this.getList(this.activeIndex) }, change(e) { const { current } = e.detail; //取到 current这个数据 this.$emit(change, current) // TODO 当数据不存在 或者 长度是 0 的情况下 
  
  
  
  
  
  
，才去请求数据 不用每次都加载已经加载过的 if (!this.listCatchData[current] || this.listCatchData[current].length === 0) { this.getList(current) } }, getList(current) { if (!this.load[current]) {//分离page 不能让他们共享一个 this.load[current] = { page: 1, loading: loading } } console.log(当前的页数, this.load[current].page); this.$api.get_list({ //传三个参数 name: this.tab[current].name, page: this.load[current].page, pageSize: this.pageSize }).then(res => { console.log(res); const { data } = res if (data.length === 0) //if没有数据就搞它 let oldLoad = {} oldLoad.loading = noMore oldLoad.page = this.load[current].page this.$set(this.load, current, oldLoad) // 强制渲染页面 this.$forceUpdate() return } let oldList = this.listCatchData[current] || []//解决每次加载覆盖 没有新的 oldList.push(...data) this.$set(this.listCatchData, current, oldList) }) } } } </script> <style lang="scss"> .home-swiper { height: 100%; .swiper-item { height: 100%; overflow: hidden; .list-scroll { height: 100%; } } } </style>

在 显示加载中的组件里面

<uni-load-more iconType="snow" :status="load.loading"></uni-load-more>