目录
一、添加全部
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>
