页面下拉刷新的两种方式

第一种方式：onPullDownRefresh 生命周期钩子第二种方式：uni.startPullDownRefresh(OBJECT)

更多详细内容请进入 uniapp 官网查看： https://uniapp.dcloud.io/api/ui/pulldown?id=onpulldownrefresh

第一种方式：onPullDownRefresh 生命周期钩子

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

需要在 pages.json 里，找到的当前页面的 pages 节点，并在 style 选项中开启 enablePullDownRefresh。

当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

<template> <view> <view v-for="(item,index) of list" :key="index"> {{item}} </view> </view> </template> <script> export default { data() { return { list: [1, 2, 3, 4, 5] } }, methods: {}, onPullDownRefresh() { console.log("触发下拉刷新") setTimeout(() => { this.list = [1, 2, 3, 5, 3, 2] //关闭下拉刷新 uni.stopPullDownRefresh() },2000) } } </script> <style> </style>

第二种方式：uni.startPullDownRefresh(OBJECT)

通过 uni.startPullDownRefresh(OBJECT) 开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

<template> <view> <view v-for="(item,index) of list" :key="index"> {{item}} </view> <button @click="pullDown">点击触发下拉刷新</button> </view> </template> <script> export default { data() { return { list: [1, 2, 3, 4, 5] } }, methods: { pullDown() { //触发下拉刷新 uni.startPullDownRefresh() } }, onPullDownRefresh() { console.log("触发下拉刷新") setTimeout(() => { this.list = [1, 2, 3, 5, 3, 2] //关闭下拉刷新 uni.stopPullDownRefresh() }, 2000) } } </script> <style> </style>