uniapp下拉刷新和上拉请求

最新推荐文章于 2025-04-15 11:30:13 发布

原创最新推荐文章于 2025-04-15 11:30:13 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #es6 #前端

uniapp 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了在uniapp中实现下拉刷新和上拉加载更多功能的方法。通过配置pages.json并使用生命周期函数onPullDownRefresh和onReachBottom，结合request请求完成数据的实时刷新与加载。同时提供了具体实现代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、uniapp下拉刷新

在pages.json中为需要下拉刷新的页面添加enablePullDownRefresh为true
使用生命周期函数onPullDownRefresh配合request请求完成数据刷新

{
	"path": "pages/goods/goods",
	"style": {
		"enablePullDownRefresh": true
	 }
}

二、uniapp上拉请求

使用生命周期函数onReachBottom监听页面触底，并配合request请求完成数据刷新

三、具体实现代码如下

根据flag值修改“没有更多了”显示状态
goods-list为封装的商品列表组件
goods: [ ]用于存储商品列表信息
pageindex数据分页，请求时需要携带pageindex
$myRequest为uni.request(OBJECT) 的二次封装，点击此处直达相关文章

<template>
	<view class="goodBackground">
		<goods-list :goods="goods"></goods-list>
		<view class="isOver" v-if="flag">————— 没有更多了 —————</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		components: {
			"goods-list": goodsList
		},
		data() {
			return {
				goods: [],
				pageindex: 1,
				flag: false
			}
		},
		methods: {
			async getGoodsList(callBak) {
				const goodsList = await this.$myRequest({
					url: '/api/getgoods?pageindex=' + this.pageindex
				})
				this.goods = [...this.goods, ...goodsList.data.message]
				callBak && callBak()
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		onReachBottom() {
			if (this.goods.length < this.pageindex * 10) {
				this.flag = true
				return
			}
			this.pageindex++
			this.getGoodsList()
		},
		onPullDownRefresh() {
			this.goods = []
			this.pageindex = 1
			this.flag = false
			//此处使用定时器可查看出下拉刷新效果
			setTimeout(() => {
				this.getGoodsList(() => {
					uni.stopPullDownRefresh()
				})
			}, 1000)
		}
	}
</script>