uniapp实现上拉加载更多(uniapp下拉)

uniapp实现上拉加载更多

目录

一、添加全部

1.在主页面中添加一列

 2.改云函数

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

二、实现上拉加载

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

2.获取下拉事件

3.写触发这个下拉干嘛

在 显示加载中的组件里面

---

一、添加全部1.在主页面中添加一列data.unshift({name:'全部'}) //添加一列 ‘全部’

推荐整理分享uniapp实现上拉加载更多(uniapp下拉)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uniapp的下拉框,uniapp实现上拉加载下一页,uniapp实现下拉弹出新页面,uniapp下拉菜单怎么赋值,uniapp下拉,uniapp上拉刷新,uniapp实现上拉加载下拉刷新,uniapp实现上拉加载下一页,内容如对您有帮助，希望把文章链接给更多的朋友！

 

 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>