uniapp实现上拉加载更多功能的全过程_javascript技巧_

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

'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 } };

'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 } };

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

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

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) }) }