uniapp 下拉刷新

需求：我使用一个滚动列表，需要下拉刷新页面的功能

下拉刷新的情况取决于滚动列表使用的技术

第一 种：页面滚动

产生页面很简单，只需要列表长度超过页面高度，就直接产生了滚动条。

处理页面滚动的下拉刷新。

1. 配置

"style": {"navigationBarTitleText": "","enablePullDownRefresh": true, //开启页面级的下拉刷新
}

2. 在页面中使用onPullDownRefresh 处理函数（和onLoad等生命周期函数同级）

<script setup>
import {onPullDownRefresh} from '@dcloudio/uni-app';
onPullDownRefresh(()=>{console.log("监听到下拉刷新，处理逻辑");
});
<script>

第二种：ScrollView组件产生的列表，需要自定义下拉刷新

这里，最好仔细看一下scroll-view组件的api介绍。scroll-view | uni-app官网

<template><scroll-view :scroll-y="true"  class="list"lower-threshold="150"@scrolltolower="handleScrollBottom":refresher-enabled="enabled":refresher-triggered="trigger"@refresherrefresh="refresherrefresh"refresher-background="#000"></scroll-view>
</template><script setup>let enabled = ref(true); //开启自定义下拉刷新let trigger = ref(false); //初始情况下，关闭刷新状态/*自定义下拉刷新被触发时，（1）重新请求数据 （2）开启下拉刷新状态*/const refresherrefresh = ()=>{ trigger.value = true; //开启状态setTimeout(()=>{      //模拟请求数据，请求成功后，关闭状态trigger.value = false;},3000);}
</script>