H5下拉刷新和上拉加载实现原理浅析
前言
在移动端H5网页中,下拉刷新和上拉加载更多数据的交互方式出现频率很高,开源社区也有很多类似的解决方案,如iscroll,pulltorefresh.js库等。下面是对这两种常见交互基本实现原理的阐述。
实现原理
下拉刷新
实现下拉刷新主要分为三步:
- 监听原生
touchstart
事件,记录其初始位置的值,e.touches[0].pageY
; - 监听原生
touchmove
事件,记录并计算当前滑动的位置值与初始位置值的差值,大于0
表示向下拉动,并借助CSS3的translateY
属性使元素跟随手势向下滑动对应的差值,同时也应设置一个允许滑动的最大值; - 监听原生
touchend
事件,若此时元素滑动达到最大值,则触发callback
,同时将translateY
重设为0
,元素回到初始位置。
示例。查看链接:下拉刷新demo(PC浏览器需调成手机模拟器模式查看)
<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>
(function(window) {
var _element = document.getElementById('refreshContainer'),
_refreshText = document.querySelector('.refreshText'),
_startPos = 0,
_transitionHeight = 0; _element.addEventListener('touchstart', function(e) {
console.log('初始位置:', e.touches[0].pageY);
_startPos = e.touches[0].pageY;
_element.style.position = 'relative';
_element.style.transition = 'transform 0s';
}, false); _element.addEventListener('touchmove', function(e) {
console.log('当前位置:', 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); _element.addEventListener('touchend', function(e) {
_element.style.transition = 'transform 0.5s ease 1s';
_element.style.transform = 'translateY(0px)';
_refreshText.innerText = '更新中...'; // todo... }, false);
})(window);
在下拉到松手的过程中,经历了三个状态:
- 当前手势滑动位置与初始位置差值大于零时,提示正在进行下拉刷新操作;
- 下拉到一定值时,显示松手释放后的操作提示;
- 下拉到达设定最大值松手时,执行回调,提示正在进行更新操作。
上拉加载
上拉加载更多数据是在页面滚动时触发的动作,一般是页面滚动到底部时触发,也可以选择在滚动到一定位置的时候触发。
以滚动到页面底部为例。实现原理是分别获得当前滚动条的scrollTop
值、当前可视范围的高度值clientHeight
以及文档的总高度scrollHeight
。当scrollTop
和clientHeight
的值之和大于等于scrollHeight
时,触发callback
。
示例。查看链接:上拉加载demo
<main>
<ul id="refreshContainer">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
...
</ul>
<p class="refreshText"></p>
</main>
(function(window) {
// 获取当前滚动条的位置
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
} // 获取当前可视范围的高度
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
}
else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
} // 获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
} var _text = document.querySelector('.refreshText'),
_container = document.getElementById('refreshContainer'); // 节流函数
var throttle = function(method, context){
clearTimeout(method.tId);
method.tId = setTimeout(function(){
method.call(context);
}, 300);
} function fetchData() {
setTimeout(function() {
_container.insertAdjacentHTML('beforeend', '<li>new add...</li>');
}, 1000);
} window.onscroll = function() {
if (getScrollTop() + getClientHeight() == getScrollHeight()) {
_text.innerText = '加载中...';
throttle(fetchData);
}
}; })(window);
页面绑定onscroll
事件时加入了节流函数,其作用就是忽略滚动条300毫秒内的连续多次触发。
小结
上拉刷新的实现主要依靠的是touch
事件的三个阶段,以及借助CSS3动画效果;下拉加载主要依靠页面的onscroll
事件,需要注意的是页面滚动时可能要考虑函数节流。
H5下拉刷新和上拉加载实现原理浅析的更多相关文章
- android--------自定义控件ListView实现下拉刷新和上拉加载
开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,为了方便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能. Android下拉刷新可以分为两种情况: 1.获取 ...
- Android 5.X新特性之为RecyclerView添加下拉刷新和上拉加载及SwipeRefreshLayout实现原理
RecyclerView已经写过两篇文章了,分别是Android 5.X新特性之RecyclerView基本解析及无限复用 和 Android 5.X新特性之为RecyclerView添加Header ...
- iscroll.js 下拉刷新和上拉加载
html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- IOS 开发下拉刷新和上拉加载更多
IOS 开发下拉刷新和上拉加载更多 简介 1.常用的下拉刷新的实现方式 (1)UIRefreshControl (2)EGOTTableViewrefresh (3)AH3DPullRefresh ( ...
- IOS UITableView下拉刷新和上拉加载功能的实现
在IOS开发中UITableView是非常常用的一个功能,而在使用UITableView的时候我们经常要用到下拉刷新和上拉加载的功能,今天花时间实现了简单的UITableView的下拉刷新和上拉加载功 ...
- Android 使用PullToRefresh实现下拉刷新和上拉加载(ExpandableListView)
PullToRefresh是一套实现非常好的下拉刷新库,它支持: 1.ListView 2.ExpandableListView 3.GridView 4.WebView 等多种常用的需要刷新的Vie ...
- 使用PullToRefresh实现下拉刷新和上拉加载
使用PullToRefresh实现下拉刷新和上拉加载 分类: Android2013-12-20 15:51 78158人阅读 评论(91) 收藏 举报 Android下拉刷新上拉加载PullToRe ...
- 下拉刷新和上拉加载 Swift
转载自:http://iyiming.me/blog/2015/07/05/custom-refresh-and-loading/ 关于下拉刷新和上拉加载,项目中一直使用MJRefresh(原先还用过 ...
- 安卓开发笔记——关于开源组件PullToRefresh实现下拉刷新和上拉加载(一分钟搞定,超级简单)
前言 以前在实现ListView下拉刷新和上拉加载数据的时候都是去继承原生的ListView重写它的一些方法,实现起来非常繁杂,需要我们自己去给ListView定制下拉刷新和上拉加载的布局文件,然后添 ...
随机推荐
- Spring Boot应用总结更新
一.SpringBoot的产生背景: SpringBoot的产生背景伴随着微服务,微服务的相关概念参考上一篇的博客,分布式架构理论: 微服务的宏观概念理解: 将一个大应用拆分成多个小应用,一个小应用是 ...
- 仿9GAG制作过程(四)
有话要说: 这次主要讲述主页面下拉刷新和上拉加载功能的实现. 主要是使用了SwipeRefreshLayout的布局方式,并在此基础上通过RecyclerView的特性增加了上拉加载的功能. 成果: ...
- ASP.NET中弹出消息框的几种常见方法
在ASP.NET网站开发中,经常需要使用到alert消息框,尤其是在提交网页的时候,往往需要在服务器端对数据进行检验,并给出提示或警告. 这里,仅介绍几种不同的实现方法. 1.众所周知的方法是采用如下 ...
- Ubuntu下创建XFS文件系统的LVM
以前在Linux下面玩LVM,一般都是选择ext3.ext4格式的文件系统,最近在Ubuntu 16.04.5下安装配置一个MySQL数据库服务器,遂测试了一下XFS文件系统的LVM,其实仔细对比下来 ...
- eos 创建两对的公钥和私钥, 钱包,交易所转账到主网,主网到交易所
在ubuntu18.04上安装EOS的目的: 在ubuntu中,进行eos源码编译和安装 在不联网的安全环境下,用eos官方的命令行工具,创建自己的公钥和私钥 用eos官方的命令行工具,创建钱包,执行 ...
- 安装和使用git遇到的问题总结
一,centos7下安装(因为centos7下用yum安装git的版本太低了,所以只能下载源代码,然后用源代码安装) 下载编译工具 yum -y groupinstall "Developm ...
- jenkins自动化工具使用教程(转)
自动化构建.测试.部署.代码检测越来越重要.主要有一下几点原因 企业做大,项目变多,多端支持(web,h5,小程序等) 微服务提倡高内聚低耦合,项目因拆分变多 DevOps自动化运维流行 集群化,高可 ...
- 微信js-sdk开发获取签名和获取地理位置接口示例
###微信js-sdk开发获取签名和获取地理位置接口示例 前言:在做微信公众号开发时需要获取用户的地理位置信息,之前通过高德或者百度.腾讯等地图的api时发现经常获取不到,毕竟第三方的东西,后来改为采 ...
- 使用C++对物理网卡/虚拟网卡进行识别(包含内外网筛选)
简介 在Socket编程的时候,我们需要实时获取我们所需要的IP地址.例如在编写后门的时候,我们可能需要获得有效的外网IP或内网IP:有时候我们可能需要判断我们获取的是否是虚拟机网卡,这时候就需要对每 ...
- Bootstrap -- 文本,背景,其他样式
Bootstrap -- 文本,背景,其他样式 1. 文本样式:展示了不同的文本颜色 使用文本样式: <!DOCTYPE html> <html> <head> & ...