uniapp 下拉刷新

以你之姓@ 2024-04-22 15:15 74阅读 0赞

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

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

## 第一 种：页面滚动 ##

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

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

1. 配置

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

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

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

这里，最好仔细看一下scroll-view组件的api介绍。[scroll-view | uni-app官网][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>

[scroll-view _ uni-app]: https://uniapp.dcloud.net.cn/component/scroll-view.html#scroll-view