uniapp实现下拉刷新与上拉触底加载功能的示例代码

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

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

{
    "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)
},

<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%;
	
}
.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>