文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

uniapp实现上拉加载更多功能的全过程

2022-11-13 18:22

关注

一、添加全部

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>

总结

到此这篇关于uniapp实现上拉加载更多功能的文章就介绍到这了,更多相关uniapp上拉加载更多内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯