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

article/2025/10/26 17:54:27

此文为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>