快捷導(dǎo)航

uniapp實現(xiàn)下拉刷新與上拉觸底加載功能的示例代碼

更新時間：2023年04月19日 10:37:09 作者：會說法語的豬

這篇文章主要記錄一下uniapp實現(xiàn)下拉刷新與上拉觸底加載功能的示例代碼，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

下拉刷新

這個用于監(jiān)聽該頁面用戶下拉刷新事件。

首先在pages.json中需要下拉刷新的頁面，在style配置enablePullDownRefresh為true就可以了（要在 pages.json 里，找到的當(dāng)前頁面的pages節(jié)點，并在 style 選項中開啟 enablePullDownRefresh），然后在具體頁面使用onPullDownRefresh回調(diào)函數(shù)就可以了。最后在當(dāng)處理完數(shù)據(jù)刷新后，uni.stopPullDownRefresh 可以停止當(dāng)前頁面的下拉刷新。

官網(wǎng)：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() // 停止當(dāng)前頁面刷新
},

上拉觸底加載

只需要在style配置onReachBottomDistance 就可以了。頁面上拉觸底事件觸發(fā)時距頁面底部距離，單位只支持px

{
    "path": "pages/index/index",
    "style": {
        "navigationBarTitleText": "PULLANDREACHDEMO",
        "enablePullDownRefresh": true, // 下拉刷新
        "onReachBottomDistance": 50 // 頁面上拉觸底事件觸發(fā)時距頁面底部距離  觸底加載
    }
}

然后頁面中的回調(diào)

// 觸底加載
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: {
			// 獲取分頁數(shù)據(jù)
			getPageData() {
				let curDataList = this.dataListAll.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
				if(curDataList.length) {
					this.dataList.push(...curDataList)
				}
			},
			// 模擬請求 獲取所有數(shù)據(jù)
			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>