需求:我使用一个滚动列表,需要下拉刷新页面的功能
下拉刷新的情况取决于滚动列表使用的技术
产生页面很简单,只需要列表长度超过页面高度,就直接产生了滚动条。
处理页面滚动的下拉刷新。
1. 配置
- "style": {
- "navigationBarTitleText": "",
- "enablePullDownRefresh": true, //开启页面级的下拉刷新
- }
2. 在页面中使用onPullDownRefresh 处理函数(和onLoad等生命周期函数同级)
- import {onPullDownRefresh} from '@dcloudio/uni-app';
- onPullDownRefresh(()=>{
- console.log("监听到下拉刷新,处理逻辑");
- });
这里,最好仔细看一下scroll-view组件的api介绍。scroll-view | uni-app官网
- <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>
-
-
- <script setup>
- let enabled = ref(true); //开启自定义下拉刷新
- let trigger = ref(false); //初始情况下,关闭刷新状态
-
- /*自定义下拉刷新被触发时,
- (1)重新请求数据 (2)开启下拉刷新状态
- */
- const refresherrefresh = ()=>{
- trigger.value = true; //开启状态
- setTimeout(()=>{ //模拟请求数据,请求成功后,关闭状态
- trigger.value = false;
- },3000);
- }
- script>