如何实现上拉加载,下拉刷新

上拉加载,下拉刷新这两种交互,经常出现在移动端中,本质上和PC网页的分页一样,只是交互形式不同而已。

开源社区中有很多的方案,比如:isscroll、better-scroll、pulltorefresh.js,这些第三方库使用起来非常便捷。

上拉加载以及下拉刷新都依赖于用户交互,最重要的是理解在什么场景,什么时机下触发交互动作。

上拉加载

上拉加载本质上就是页面触底,或者是快要触底的时候触发。

判断页面触底,就需要使用到这几个属性:

  • scrollTop:滚动区域的高度到window顶部的距离,它会随着往上滚动而不断增加,初始值为0,它是一个动态值。
  • clientHeight:表示屏幕可视区域的高度
  • scrollHeight:页面不能滚动的时候也存在,这时候scrollHeight等于clientHeight。scrollHeight表示body内所有元素的总高度,包括body的padding

触底公式:scrollTop + clientHeight >= scrollHeight

实现代码:

let clientHeight = document.documentElement.clientHeight; //浏览器的高度
let scrollHeight = document.body.scrollHeight;
let scrollTop = document.documentElement.scrollTop;
let distance = 50; // 距离视窗还有50的时候,开始触发
if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {console.log(" 加载数据");
}

下拉刷新

下拉刷新是页面触顶,用户下来时需要触发。

实现下拉刷新分为三步:

  • 监听原生touchstart事件,记录它的初始位置:e.touches[0].pageY
  • 监听原生touchmove事件,记录并计算当前滑动的位置与初始位置的差距,大于0表示向下拉动,并且借助css的translateY属性,让元素跟随手势向下滑动对应的差值,同时也设置一个允许滑动的最大差值;
  • 监听touchend事件,如果这时候元素滑动达到最大值,那就触发Callback,同时将translateY重置为0,元素回到初始位置。

HTML代码如下:

  <main><p class="refreshText"></p><ul id="refreshContainer"><li>111</li><li>222</li><li>333</li><li>444</li><li>555</li>...</ul></main>

监听touchstart事件,记录初始值:

var _element = document.getElementById('refreshContainer'),_refreshText = document.querySelector('.refreshText'),_startPos = 0, // _transitionHeight = 0; // 
_element.addEventListener('touchstart', function (e) {_startPos = e.touches[0].pageY; // _element.style.position = 'relative';_element.style.transition = 'transform 0s';
}, false);

监听touchmove移动事件,记录滑动差值:

_element.addEventListener('touchmove', function (e) {// e.touches[0].pageY _transitionHeight = e.touches[0].pageY - _startPos; // if (_transitionHeight > 0 && _transitionHeight < 60) {_refreshText.innerText = ' ';_element.style.transform = 'translateY(' + _transitionHeight + 'px)';if (_transitionHeight > 55) {_refreshText.innerText = ' ';}}
}, false);

最后监听touchend事件:

_element.addEventListener('touchend', function (e) {_element.style.transition = 'transform 0.5s ease 1s';_element.style.transform = 'translateY(0px)';_refreshText.innerText = ' ...';// todo...
}, false);

这三个事件就是从下拉到松手的过程:

  1. 当前手势滑动位置与初始位置差值大于0的时候,提示正在进行下拉刷新操作
  2. 下拉到一定值时,显示松手释放后的操作提示
  3. 下来到设定最大值的时候,松手,执行回调,提示正在进行更新操作

在实际的开发中,更多可能会使用第三方库,这样减少很多的工作量,如果自己封装的话,还得考虑兼容性,易用性和性能等等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/11619.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一、Hive优化

1-1 分桶采样 当表的数据量比较庞大的时候, 在编写SQL语句后, 需要首先测试 SQL是否可以正常的执行, 需要在表中执 行查询操作, 由于表数据量比较庞大, 在测试一条SQL的时候整个运行的时间比较久, 为了提升测试效率, 可以整个表 抽样出一部分的数据, 进行测试 校验数据的可行…

基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (七)

LlaMA 3 系列博客 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (一) 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (二) 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (三) 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (四) 基于 LlaMA…

快团团新人怎么找供货团长?免费教程一学就会!

作为快团团的新手&#xff0c;想要寻找供货团长&#xff0c;可以按照以下步骤进行&#xff1a; 打开微信&#xff1a;首先&#xff0c;在您的手机上打开微信应用。 搜索快团团&#xff1a;在微信顶部的搜索框中输入“团长运营之家”&#xff0c;选择出现的“团长运营之家”公号…

搭建网站式个人网盘-超仿Windows界面

搭建网站式个人网盘-超仿Windows界面 效果图部分源码领取源码下期更新预报 效果图 一款网站式个人网盘源码-Windows界面相等于一个网站式电脑可以放照片&#xff0c;视频-支持在线播放&#xff08;你懂的&#xff09;我觉得式一款很不错的个人网盘提醒&#xff1a;千万不要升级…

论坛帖子数据抓取

要抓取论坛帖⼦数据&#xff0c;包括帖⼦标题、作者和发布⽇期&#xff0c;可以使⽤ requests 库获取⽹⻚内容&#xff0c;再⽤ BeautifulSoup 解析HTML。 由于直接抓取具体论坛的数据可能涉及到版权和隐私问题&#xff0c;这⾥将使⽤假定的元素和类名来说明如何实现这⼀过程。…

leetcode 918.环形子数组的最大和

思路&#xff1a;DP 其实和昨天做的哪个重复数组差不多&#xff0c;按顺序来说先做这个题目其实更好。 这里需要分两种情况&#xff1a;第一个&#xff0c;就是数组不越界的时候&#xff0c;这个时候最大子数组和就是leetcode 53题的题解。 如果说越界了&#xff0c;我们还需…

Java基础知识(六) 字符串

六 字符串 6.1 String字符串 1、String类对象创建 定义String类对象格式&#xff1a;** 1&#xff09;String 字符串变量名“字符串常量”&#xff1b; 2&#xff09;String 字符串变量名new String(字符串常量); 3&#xff09;String 字符串变量名; 字符串变量名“字符串常…

【STM32HAL库】DAC输出0-3.3v

一、简要介绍一下DAC DAC也有分辨率&#xff0c;转换时间&#xff0c;精度等 分辨率常见为8或12位的 转换时间F1&#xff0c;F4,F7都是3us左右&#xff0c;而H7系列是1.7us 1.DAC框图 2.数据格式&#xff08;对齐方式&#xff09; 3.触发源 4.可以发送DMA请求 注意&#xff…

一次pytorch分布式训练精度调试过程

现象: loss不下降 过程如下: 1.减少层数&#xff0c;准备最小复现环境 2.dropout设置为0&#xff0c;重复运行二次&#xff0c;对比loss是否一致 3.第二次迭代开始loss不一致 4.对比backward之后的梯度,发现某一个梯度不一致 5.dump得到所有算子的规模&#xff0c;单算子测试…

【知识碎片】2024_05_13

本文记录了两道代码题【自除数】和【除自身以外数组的乘积】&#xff08;利用了前缀积和后缀积&#xff0c;值得再看&#xff09;&#xff0c;第二部分记录了关于指针数组和逗号表达式的两道选择题。 每日代码 自除数 . - 力扣&#xff08;LeetCode&#xff09; /*** Note: T…

Ubuntu安装samba软件

目录 Ubuntu安装samba软件 简要介绍 samba软件的安装 samba软件的配置 samba软件的使用 Ubuntu安装samba软件 简要介绍 我们在做嵌入式开发时&#xff0c;大部分的时间都是在写代码或者修改代码&#xff0c;这个过程我们一般是在Windows系统上进行的&#xff0c;在写完代码…

类与对象(二)

封装 封装作为面向对象三大特性&#xff08;封装&#xff0c;继承&#xff0c;多态&#xff09;之一&#xff0c;那如何实现封装性的呢&#xff1f;就又得拿出上面的访问修饰限定符的图 public: 就是在任何地方都可以访问 protected: 涉及子类在介绍继承时详细介绍 default: …

Flutter 中的 SingleChildScrollView 小部件:全面指南

Flutter 中的 SingleChildScrollView 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;SingleChildScrollView 是一个可以滚动单个子控件的小部件。当子控件的大小超过视图时&#xff0c;用户可以滚动以查看所有内容。SingleChildScrollView 通常用于创建可滚动的表单、…

分类预测 | Matlab实现DBO-CNN-SVM蜣螂算法优化卷积神经网络结合支持向量机多特征分类预测

分类预测 | Matlab实现DBO-CNN-SVM蜣螂算法优化卷积神经网络结合支持向量机多特征分类预测 目录 分类预测 | Matlab实现DBO-CNN-SVM蜣螂算法优化卷积神经网络结合支持向量机多特征分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.Matlab实现DBO-CNN-SVM蜣螂算法…

APP反抓包 - 客户端证书验证进阶(代码混淆)

1.关于混淆 在安卓开发中,对于第三方的包是可以进行混淆的,例如:OKHttp3.Http.Cert.check 被混淆后可以是a.f.c.b 形式。在安卓开发中,系统包是无法混淆的,例如:java.security.KeyStore不会被混淆。由于这种的情况的存在,再次审示我们之前的通用脚本,就会发现他是不通用…

计算机Java项目|Springboot房产销售系统

作者主页&#xff1a;编程指南针 作者简介&#xff1a;Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师 主要内容&#xff1a;Java项目、Python项目、前端项目、人工智能与大数据、简…

mybatis-plus(2)

上文我们介绍完mybatis-plus的常用注解&#xff0c;现在介绍 mp的基础的yaml配置 mybatis-plus:type-aliases-package: #该位置写 数据库对应实体类的全路径global-config:db-config:id-type: auto # 全局id类型为自增长 mp同时也是支持手写sql&#xff0c;而且mapper的读取地…

如何用 OceanBase做业务开发——【DBA从入门到实践】第六期

当应用一款新的数据库时&#xff0c;除了基础的安装部署步骤&#xff0c;掌握其应用开发方法才是实现数据库价值的关键。为此&#xff0c;我们特别安排了5月15日&#xff08;周三&#xff09;的《DBA 从入门到实践》第六期课程——本次课程将带大家了解OceanBase数据库的开发流…

【爬虫】爬取股票历史K线数据写入数据库(三)

前几天有写过两篇&#xff1a; 【爬虫】爬取A股数据写入数据库&#xff08;二&#xff09; 【爬虫】爬取A股数据写入数据库&#xff08;一&#xff09; 现在继续完善&#xff0c;分析及爬取股票的历史K线数据通过ORM形式批量写入数据库。 2024/05&#xff0c;本文主要内容如下…

JavaScript数字(Number)个数学(Math)对象

目录 前言&#xff1a; Number&#xff08;数字&#xff09;对象 前言&#xff1a; nfinity(正负无穷大)&#xff1a; NaN&#xff08;非数字&#xff09;&#xff1a; Number的属性 Number的方法 构造函数 静态方法 实例方法 Math&#xff08;数学&#xff09;对象…