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

 更新时间:2022年10月14日 08:44:47   作者:如旧呀  
我们在项目中经常使用到上拉加载更多,下面这篇文章主要给大家介绍了关于uniapp实现上拉加载更多功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

一、添加全部

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上拉加载更多内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JS百度地图搜索悬浮窗功能

    JS百度地图搜索悬浮窗功能

    这篇文章主要为大家详细介绍了JS百度地图搜索悬浮窗功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • html的DOM中document对象images集合用法实例

    html的DOM中document对象images集合用法实例

    这篇文章主要介绍了html的DOM中document对象images集合用法,实例分析了images集合的语法与使用技巧,需要的朋友可以参考下
    2015-01-01
  • 原生JS实现LOADING效果

    原生JS实现LOADING效果

    这篇文章主要向大家介绍了原生JS实现的LOADING效果的代码,效果非常不错,而且可以自定义颜色和速度,推荐给大家,希望大家能够喜欢。
    2015-03-03
  • webpack 自动清理 dist 文件夹的两种实现方法

    webpack 自动清理 dist 文件夹的两种实现方法

    这篇文章主要介绍了webpack 自动清理 dist 文件夹的两种实现方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-06-06
  • js 数组实现一个类似ruby的迭代器

    js 数组实现一个类似ruby的迭代器

    今天突然发现js的数组处理起来真是麻烦,代码一些就是一大堆,相比起ruby的迭代器来真是逊色不少。
    2009-10-10
  • JavaScript使用prototype属性实现继承操作示例

    JavaScript使用prototype属性实现继承操作示例

    这篇文章主要介绍了JavaScript使用prototype属性实现继承操作,结合实例形式详细分析了JavaScript使用prototype属性实现继承的相关原理、实现方法与操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 小程序实现列表展开收起效果

    小程序实现列表展开收起效果

    这篇文章主要为大家详细介绍了小程序实现列表展开收起效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 更快的异步执行(setTimeout多浏览器)

    更快的异步执行(setTimeout多浏览器)

    如果要异步执行一个函数,我们最先想到的方法肯定会是setTimeout,这里简单介绍下,方便需要的朋友
    2014-08-08
  • js中日期的加减法

    js中日期的加减法

    JavaScript实现日期加减计算功能代码实例,因为在js中没有类似C#中的AddDays方法,所以要想实现日期加减的话,就需要自己写函数来实现。
    2015-05-05
  • 深入了解JavaScript词法作用域

    深入了解JavaScript词法作用域

    这篇文章主要介绍了JavaScript词法作用域的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07

最新评论