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

此文为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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

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

{
   
  "path":"pages/list/list",
    "style":{
   
      "enablePullDownRefresh": true
    }
}
1
2
3
4
5
6
7
8

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

api文档

监听下拉刷新

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

<template>
	<view>
		<view>这是列表页</view>
		<view class="box-item" v-for="item in list" :key="item">
			{
  {item}}
		</view>
	</view>
</template>
<script>
1
2
3
4
5
6
7
8
9