uniapp怎么实现下拉刷新与上拉触底加载功能

这篇文章主要介绍“uniapp怎么实现下拉刷新与上拉触底加载功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“uniapp怎么实现下拉刷新与上拉触底加载功能”文章能帮助大家解决问题。

下拉刷新

这个用于监听该页面用户下拉刷新事件。

首先在pages.json中需要下拉刷新的页面，在style配置enablePullDownRefresh为true就可以了（要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh），然后在具体页面使用onPullDownRefresh回调函数就可以了。最后在当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

pages.json：

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "PULLANDREACHDEMO",
        "enablePullDownRefresh": true // 开启下拉刷新
    }
}

// 下拉刷新
async onPullDownRefresh() {
    console.log('下拉刷新-->>')
    this.dataListAll = await this.loadmore()
    this.getPageData()
    uni.stopPullDownRefresh() // 停止当前页面刷新
},

上拉触底加载 

只需要在style配置onReachBottomDistance 就可以了。页面上拉触底事件触发时距页面底部距离，单位只支持px

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "PULLANDREACHDEMO",
        "enablePullDownRefresh": true, // 下拉刷新
        "onReachBottomDistance": 50 // 页面上拉触底事件触发时距页面底部距离  触底加载
    }
}

然后页面中的回调 

// 触底加载
onReachBottom() {
    console.log('触底加载-->>')
    this.status = 'loading'
    setTimeout(() => {
        this.status = 'nomore'
        this.pageNo++
        this.getPageData()
    }, 500)
},

完整demo 

<template>
	<view class="index">
		<view v-for="(item, index) in dataList" :key="index">
			<image :src="item.url" mode=""></image>
			<view>列表长度--{{ index + 1 }}</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				pageNo: 1,
				pageSize: 20,
				dataListAll: [],
				dataList: [],
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
					'https://cdn.uviewui.com/uview/album/4.jpg',
					'https://cdn.uviewui.com/uview/album/5.jpg',
					'https://cdn.uviewui.com/uview/album/6.jpg',
					'https://cdn.uviewui.com/uview/album/7.jpg',
					'https://cdn.uviewui.com/uview/album/8.jpg',
					'https://cdn.uviewui.com/uview/album/9.jpg',
					'https://cdn.uviewui.com/uview/album/10.jpg',
				],
				status: 'nomore'
			}
		},
		async onLoad() {
			this.dataListAll = await this.loadmore()
			this.getPageData()
		},
		// 下拉刷新
		async onPullDownRefresh() {
			this.dataListAll = await this.loadmore()
            this.pageNo = 1
			this.getPageData()
			uni.stopPullDownRefresh()
		},
		// 触底加载
		onReachBottom() {
			this.status = 'loading'
			setTimeout(() => {
				this.status = 'nomore'
				this.pageNo++
				this.getPageData()
			}, 500)
		},
		methods: {
			// 获取分页数据
			getPageData() {
				let curDataList = this.dataListAll.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
				if(curDataList.length) {
					this.dataList.push(...curDataList)
				}
			},
			// 模拟请求 获取所有数据
			loadmore() {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						const dataList = []
						for (let i = 0; i < 120; i++) {
							dataList.push({
								url: this.urls[uni.$u.random(0, this.urls.length - 1)]
							})
						}
						resolve(dataList)
					}, 500)
				})
			}
		}
	}
</script>
 
<style scoped>
.index {
	width: 100%;
	height: 100%;
	/* overflow: auto;
	overflow-x: hidden; */
}
.index > view {
	width: 100%;
	height: 120rpx;
	border-bottom: 1px solid #ccc;
	padding-left: 15rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
}
.index > view > image {
	width: 100rpx;
	height: 100rpx;
	border-radius: 12rpx;
	margin-right: 10rpx;
}
.index > view > view {
	line-height: 120rpx;
	font-size: 22rpx;
	color: #000000;
}
</style>

效果 

关于“uniapp怎么实现下拉刷新与上拉触底加载功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。