[TOC]

开启下拉刷新

在uniapp中有两种方式开启下拉刷新

  • 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
  • 通过调用uni.startPullDownRefresh方法来下拉刷新。
    通过配置文件开启
    创建list页面进行演示： ```vue 

通过pages.json文件中找到当前页面的pages节点，并在 `style` 选项中开启， `enablePullDownRefresh` 
```vue
{
    "path":"page/list/list",
    "style":{
        "enablePullDownRefresh":true    
    }
}

通过API开启

api文档
uni.startPullDownRefresh()

监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

export default {
  data () {
    return {
      arr: ['前端','java','ui','大数据']
    }
  },
  methods: {
    startPull () {
      uni.startPullDownRefresh()
    }
  },
  onPullDownRefresh () {
    console.log('触发下拉刷新了')
  }
}

关闭下拉刷新

uni.stopPullDownRefresh()
停止当前页面下拉刷新。

<template>
    <view>
        <button type="primary" @click="startPull">开启下拉刷新</button>
        杭州学科
        <view v-for="(item,index) in arr" :key="index">
            {{item}}
        </view>
    </view>
</template>
<script>
    export default {
        data () {
            return {
                arr: ['前端','java','ui','大数据']
            }
        },
        methods: {
            startPull () {
                uni.startPullDownRefresh()
            }
        },

        onPullDownRefresh () {
            this.arr = []
            setTimeout(()=> {
                this.arr = ['前端','java','ui','大数据']
                uni.stopPullDownRefresh()
            }, 1000);
        }
    }
</script>

image.png