当前位置: 首页 > news >正文

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>

http://www.lryc.cn/news/160569.html

相关文章:

  • ifstream之seekg/tellg
  • OpenCV 01(图像加载与显示)
  • 1-Pytorch初始化张量和张量的类型
  • 诊断网络卡的原因
  • 100万级连接,爱奇艺WebSocket网关如何架构
  • 当电脑遇到msvcp110.dll丢失怎么办?最新解决方法分享
  • 微信小程序自动化测试pytest版工具使用方法
  • React 与 TS 结合使用时的技巧总结
  • 【深入解析spring cloud gateway】07 自定义异常返回报文
  • 如何写一个sh脚本将一个本地文件通过 scp命令上传到远程的 centos服务器?
  • 【CMake工具】工具CMake编译轻度使用(C/C++)
  • 用Navicat备份Mysql演示系统数据库的时候出:Too Many Connections
  • 知识储备--基础算法篇-矩阵
  • Zabbix -- QQ邮箱报警
  • eclipse链接MySQL数据库
  • ansible 使用roles简单部署LAMP平台
  • 如何使用Web Storage对页面中数据进行监听?
  • GO语言网络编程(并发编程)runtime包
  • MR源码解析和join案例
  • ML+LLMs:利用LLMs大语言模型赋能或者结合ML机器学习算法进行具体应用的简介、具体案例之详细攻略
  • python GIL锁
  • git打tag和版本控制规范
  • php版 短信跳转微信小程序
  • leetcode127单词接龙刷题打卡
  • 基于SSM的物流管理系统
  • EagleSDR USB HAT FT600
  • Java多线程(四)锁策略(CAS,死锁)和多线程对集合类的使用
  • 基于spring boot+ vue+ mysql开发的UWB室内外定位系统源码
  • 第2章_瑞萨MCU零基础入门系列教程之面向过程与面向对象
  • 数字图像处理:亮度对比度-几何变换-噪声处理