uniapp 下拉刷新

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

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

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

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

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

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

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官网][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

发表评论取消回复

表情：

评论列表（有 0 条评论，79人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp 下拉刷新

这里，最好仔细看一下scroll-view组件的api介绍。scroll-view | uni-app官网//开启自定义下拉刷新//初始情况下，关闭刷新状态/*自定义下拉...

以你之姓@/ 2024年04月22日 15:15/ 0 赞/ 80 阅读

相关 uniapp下拉刷新避坑指南

uniapp下拉刷新 > uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也

川长思鸟来/ 2022年12月30日 01:23/ 0 赞/ 400 阅读

相关 uniapp下拉刷新

// 下拉刷新 onPullDownRefresh(){ console.log('刷新中'); setTimeout(fun

短命女/ 2022年11月08日 14:07/ 0 赞/ 232 阅读

相关 uniapp下拉刷新

scroll-view下拉刷新（仅仅支持微信小程序） <template> <scroll-view scroll-y="true" style="h

清疚/ 2022年09月13日 04:07/ 0 赞/ 292 阅读

相关 uniapp下拉刷新上拉加载

一、需求留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据二、代码 ![在这里插入图片描述][watermark_t

﹏ヽ暗。殇╰゛Y/ 2021年09月03日 04:51/ 0 赞/ 708 阅读

相关 uniapp更好的下拉刷新动画

原生的uniapp的下拉刷新是一个普通的加载框样式真的很单一。后来手动改成了一个gif图片 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

悠悠/ 2021年08月25日 02:21/ 0 赞/ 830 阅读

相关 uniapp——下拉刷新的学习

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

迷南。/ 2021年07月26日 01:27/ 0 赞/ 408 阅读

相关 uniapp下拉刷新和触底

效果图： ![20210306115501184.gif][] 代码实现：结构目录： ![20210306113541858.png][] pages.js

阳光穿透心脏的1/2处/ 2021年07月25日 16:53/ 0 赞/ 747 阅读

相关 uniapp的上拉加载和下拉刷新

> 插件地址 [https://ext.dcloud.net.cn/plugin?id=29\detail][https_ext.dcloud.net.cn_plugin_id

灰太狼/ 2021年07月25日 00:55/ 0 赞/ 741 阅读

相关 uniapp 下拉刷新

全局开启 pages.json中->globalStyle "enablePullDownRefresh":true, 单页面开启

待我称王封你为后i/ 2021年07月24日 17:51/ 0 赞/ 489 阅读