uni-app（9）— 下拉刷新以及关闭下拉刷新，上拉加载（页面触底）

最新推荐文章于 2025-03-07 16:26:51 发布

tiffany_kim

最新推荐文章于 2025-03-07 16:26:51 发布

阅读量1.3w

点赞数 3

分类专栏： uni-app 文章标签： uni-app

本文链接：https://blog.csdn.net/tiffany_kim/article/details/116022270

版权

uni-app 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了uni-app中如何实现下拉刷新和上拉加载（页面触底）功能。通过配置文件开启下拉刷新，定义onPullDownRefresh监听刷新动作，使用uni.stopPullDownRefresh关闭刷新，结合onReachBottom监听页面触底行为，实现内容的动态加载。

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

此文为uni-app总结笔记（9）— 下拉刷新以及关闭下拉刷新，上拉加载（页面触底）

下拉刷新

开启下拉刷新

在uni-app中有三种方式开启下拉刷新

方法一：需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
方法二: 在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。
方法三：通过调用uni.startPullDownRefresh方法来开启下拉刷新

开启下拉刷新方法一：

通过配置文件开启

创建list页面进行演示

<template>
	<view>
		<view v-for="(item,index) in arr" :key="index">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				arr: ['前端','java','ui','大数据']
			}
		}
	}
</script>

<style>
</style>

通过pages.json文件中找到当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh

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

方法二：在 js 中定义 onPullDownRefresh 处理函数

api文档

监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作，并对数组内容进行更改

<template>
	<view>
		<view>这是列表页</view>
		<view class="box-item" v-for="item in list" :key="item">
			{{item}}
		</view>
	</view>
</template>
<script>
	export default {
	  data () {
	    return {
	      arr: ["前端","后端","JAVA","UI",]
	    }
	  },
	  onPullDownRefresh () {
	    console.log('触发下拉刷新了'),
	    this.list = ["JAVA","UI","前端","后端"]
	  }
	}
</script>

效果展示：
页面开始时：
在这里插入图片描述
下拉刷新并更改数组内容效果展示：

方便展示也可在 onPullDownRefresh 方法里面增加计时器，代码如下：

export default {
  data () {
    return {
      arr: ["前端","后端","JAVA","UI",]
    }
  },
  onPullDownRefresh () {
    console.log('触发下拉刷新了'),
    setTimeout(()=>{
		this.list = ["JAVA","UI","前端","后端"]
	},2000)
  }
}

关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

<template>
	<view>
		<view>这是列表页</view>
		<view class="box-item" v-for="item in list" :key="item">
			{{item}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ["前端","后端","JAVA","UI"]
			}
		},
		onPullDownRefresh() {
			console.log("触发了下拉刷新"),
			setTimeout(()=>{
				this.list = ["JAVA","UI","前端","后端"],
				uni.stopPullDownRefresh()
			},2000)
		},
	}
</script>

<style>
	.box-item {
		height: 50px;
		line-height: 50px;
	}
</style>

方法三：通过调用uni.startPullDownRefresh方法来开启下拉刷新

在刚刚的代码里面加入 button , 新增方法，点击按钮触发下拉刷新即可。

示例代码：

	<template>
	<view>
		<view>这是列表页</view>
		<view class="box-item" v-for="item in list" :key="item">
			{{item}}
		</view>
		<button @click="pullResh">下拉刷新</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ["前端","后端","JAVA","UI"]
			}
		},
		onPullDownRefresh() {
			console.log("触发了下拉刷新"),
			setTimeout(()=>{
				this.list = ["JAVA","UI","前端","后端"],
				uni.stopPullDownRefresh()
			},2000)
		},
		methods: {
			pullResh() {
				uni.startPullDownRefresh()
			}
		}
	}
</script>

<style>
	.box-item {
		height: 50px;
		line-height: 50px;
	}
</style>

效果图：
在这里插入图片描述

点击下拉刷新按钮触发示例图：
在这里插入图片描述

上拉加载（页面触底） API文档

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离，默认为50px

在这里插入图片描述

通过onReachBottom监听到触底的行为

示例代码：

<template>
	<view>
		<view>这是列表页</view>
		<view class="box-item" v-for="item in list" :key="item">
			{{item}}
		</view>
		<button @click="pullResh">下拉刷新</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: ["前端","后端","JAVA","UI"]
			}
		},
		onPullDownRefresh() {
			console.log("触发了下拉刷新"),
			setTimeout(()=>{
				this.list = ["JAVA","UI","前端","后端"],
				uni.stopPullDownRefresh()
			},2000)
		},
		methods: {
			pullResh() {
				uni.startPullDownRefresh()
			}
		},
		onReachBottom() {
			console.log("下拉到底了")
			this.list = [...this.list,...["111","JAVA","UI","前端","后端"]]
		},
	}
</script>

<style>
	.box-item {
		height: 200px;
		line-height: 200px;
	}
</style>