uniapp下拉刷新、上拉触底加载

官网都有的，这篇也简单记录一下，用到的时候直接在这里拷过去就行，不用去官网了。

下拉刷新

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

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

官网：https://uniapp.dcloud.net.cn/api/ui/pulldown.html# 

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>

效果