目录
一、添加全部
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.namelet 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.namelet 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') returnthis.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} = resif (data.length === 0) {let oldLoad = {}oldLoad.loading = 'noMore'oldLoad.page = this.load[current].pagethis.$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] = datalistCatchData: {},load: {},pageSize: 10};},watch: {tab(newVal) {//如果是新的tabif (newVal.length === 0) returnthis.listCatchData = {}this.load = {} this.getList(this.activeIndex)}},methods: {loadmore() {//if ‘没有更多数据’就返回 不申请啦if (this.load[this.activeIndex].loading === 'noMore') returnthis.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} = resif (data.length === 0) //if没有数据就搞它let oldLoad = {}oldLoad.loading = 'noMore'oldLoad.page = this.load[current].pagethis.$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>
