原生js实现下拉刷新和上拉加载更多
本文实例为大家分享了js实现下拉刷新和上拉加载更多的具体代码，供大家参考，具体内容如下
1.下拉刷新
由于原生js太久不用了,这里列一下此处涉及到的前置知识点:
移动端触屏事件: touchstart(手指按下的一瞬间),touchmove(手指在屏幕上移动时),touchend(手指松开时)
手指在页面上的坐标: pageX,pageY
写之前首先要懂原理,下拉刷新的本质就是用户在页面顶部进行上拉动作时拉到一定的距离触发数据刷新.
大概需要做的几个点:
1.在手指按下时(touchstart)记录手指的按下位置
2.在手指下滑时(touchmove)计算手指的坐标离手指按下时初始位置的差值得出下滑的距离,让容器顺应手指下滑的方向移动(translateY)对应差值的距离,对应的给一个允许用户下滑的最大距离,避免页面下拉过长.
3.在手指松开时(touchend)判断下滑的差值是否达到预期的值来进行对应的刷新数据和回弹loading.
less word,show me the code...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.container {
/* 容器原始位置向上移动60px,隐藏掉loading盒子,下拉时才显示出来 */
position: relative;
top: -100px;
}
.container .loading {
text-align: center;
height: 100px;
line-height: 100px;
}
.container .list {
border: 1px solid #666;
}
.container .list li {
line-height: 80px;
}
.container .list li:nth-child(2n) {
background-color: #ccc;
}
</style>
</head>
<body>
<section class="container">
<section class="loading">
<span>下拉刷新</span>
</section>
<section class="list">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</section>
</section>
</body>
<script type="text/javascript">
// 滚动容器
const container = document.querySelector('.container');
// loading文字容器
const span = container.querySelector('span');
let startPosition = 0;// 下拉的开始位置
let distance = 0;// 下拉距离的差值
// 手指按下时
container.addEventListener('touchstart', function (e) {
// 在回弹后的下一次下拉按下时重置loading文本
span.textContent = '下拉刷新';
// 记录开始位置
startPosition = e.touches[0].pageY;
})
// 手指移动时
container.addEventListener('touchmove', function (e) {
// 计算下拉差值
const currentPosition = e.touches[0].pageY;
// 计算下拉后离开始位置的差值
distance = currentPosition - startPosition;
// 如果下拉差值达到,则提示可以松手了 这个达到的具体值这里是取的下拉出来的区域高度
if (distance > 100) {// 案例以100为临界值,超过了100的距离就提示释放刷新
span.textContent = '释放刷新';
}
// 限制下滑的最大值为120,超过就不再下滑
if (distance < 120) {
// 容器的这个下滑是瞬时的 取消过渡效果
this.style.transition = 'transform 0s';
this.style.transform = `translateY(${distance}px)`
}
})
// 手指松开时
container.addEventListener('touchend', function (e) {
// 回弹的动作可以给个1s的过渡效果
this.style.transition = 'transform 1s';
// 如果下拉差值并没有达到 则直接回弹
if (distance > 0 && distance < 100) {
this.style.transform = `translateY(0px)`
return;
}
if (distance > 100) {
// 下拉差值达到了就显示刷新中,并暂时定格在这个位置
this.style.transform = `translateY(100px)`;
span.textContent = '刷新中';
// 等数据回来后显示刷新成功1s然后再回弹 到这里本次整个下拉执行完毕
setTimeout(() => {// setTimeout模拟异步请求 真实开发这里是一个promise请求
span.textContent = '刷新成功';
// 这个setTimeout让刷新成功显示一秒后再回弹
setTimeout(() => {
this.style.transform = `translateY(0px)`
}, 1000)
}, 2000);
}
// 一次下拉结束后重置差值
distance = 0;
})
</script>
</html>
效果如图所示:
2.上拉加载
前置js知识点: 三个dom属性
*clientHeight:不包含边框的元素可视区高度
*scrollTop:元素滚动时卷上去的距离
*scrollHeight: 元素实际高度,包含卷上去的高度
知道了上述三个属性后,于是就有了一个公式:
clientHeight + scrollTop <= scrollHeight - 触底的指定距离
然后就是上拉加载的原理:
通过监听元素的滚动事件(scroll)判断元素是否滚动到了距离底部指定距离时触发加载数据
知道了原理和三者之间的关系后,我们就知道只需要判断这个公式即可知道滚动条有没有进入触底距离,话不多说show code~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}
.container {
height: 100vh;
overflow-y: scroll;
}
.container .list {
border: 1px solid #666;
}
.container .list li {
line-height: 80px;
}
.container .list li:nth-child(2n) {
background-color: #ccc;
}
</style>
</head>
<body>
<section class="container">
<section class="list">
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
<li>我是内容</li>
</section>
</section>
</body>
<script type="text/javascript" defer="defer">
// 滚动容器
const container = document.querySelector('.container');
// 监听滚动事件
container.addEventListener('scroll', _.debounce(function (e) {
// 当元素的可视高度+滚入的距离>=元素真实高度-触底距离时,触发加载更多
if ((this.clientHeight + this.scrollTop) >= this.scrollHeight - 50) {
setTimeout(() => {
// 这里是一个异步加载数据的操作
console.log('加载更多')
}, 1000);
}
}, 700))
</script>
</html>
效果如图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
vue.js移动端app之上拉加载以及下拉刷新实战
上拉加载以及下拉刷新都是移动端很常见的功能,在搜索或者一些分类列表页面常常会用到. 跟横向滚动一样,我们还是采用better-scroll这个库来实现.由于better已经更新了新的版本,之前是0.几的版本,更新了一下发现,现在已经是1.2.6这个版本了,新版本多了些 比较好用的api,所以我也重写了之前的代码,用新的api来实现上拉加载以及下拉刷新. 首先把基本的样式写好,这里就略过了,然后引入better-scroll库 import BScroll from 'better-scroll'
-
JS+CSS实现下拉刷新/上拉加载插件
闲来无事,写了一个当下比较常见的下拉刷新/上拉加载的jquery插件,代码记录在这里,有兴趣将代码写成插件与npm包可以留言. 体验地址:http://owenliang.github.io/pullToRefresh/ 项目地址:https://github.com/owenliang/pullToRefresh 实现注意: 利用transition做动画时,优先使用transform:translate取代top,后者动画流畅度存在问题. 各移动浏览器对手势触摸的处理不同(简单罗列如下),但
-
angularjs实现上拉加载和下拉刷新数据功能
虽说AngularJS 1.x版本中对于上拉加载,下拉刷新数据功能都有做些封装,但还是有些人不清楚.其实我一开始也是不懂的,so.现在把搞懂的记录下免得少走弯路. now,begin:先说下拉刷新吧,原理就是每次下拉都重新去服务器请求过一次新的数据.一般这种刷新功能的响应数据(也就是服务器返回的(json)数据)中都会带有 "rowsOfPage": 3, "currentPage": 1, "totalPages": 10, "tot
-
mescroll.js上拉加载下拉刷新组件使用详解
本文实例为大家分享了上拉加载下拉刷新组件mescroll.js的具体代码,供大家参考,具体内容如下 附上链接地址http://www.mescroll.com/api.html#NPM,手机端和浏览器都能够使用,唯一推荐: 使用过程中要注意这些问题http://www.mescroll.com/qa.html: 使用注意事项: 1.引入的时候出问题及时看官方给出的解决方案(基本上都必须看): 2.react中一定要在dom渲染之后的方法(didMount)中初始化,因为这个需要拿到dom对象:
-
基于iscroll.js实现下拉刷新和上拉加载效果
现在已经不是纯Android独霸天下的时代了,H5嵌入Android的Hybrid混合开发是大势所趋.今天给大家带来的就是移动端中常见的"上拉刷新,下拉加载"特效,这个特效将会基于H5来实现. 先看下运行效果: 是不是有点小小的'鸡冻' ,它就是由我们今天要介绍的主人公'iscroll.js'实现的,接下来我以最最简便的方式教给大家~~ 实现步骤 一.准备好iscroll.js库 到官网下载即可: https://github.com/cubiq/iscroll 二.搭建页面结构 &l
-
JS 插件dropload下拉刷新、上拉加载使用小结
前端展示php代码: <?php header("Content-type: text/html; charset=utf-8"); include_once("./config.php"); // 初始显示界面数据获取 $data = file_get_contents(URL."/interfaces/page.php?paging=1"); // echo $data;die; $data = json_decode($data);
-
vue.js整合vux中的上拉加载下拉刷新实例教程
前言 Vux 是基于 Vue 和 Weui 开发的手机端页面 UI 组件库,开发初衷是满足公司的微信端表单需求,因为第三方的调查问卷表单系统在手机上实在比较丑(还是 PC 那一套样式适配了大小而已).于是用 vue 重构了表单组件,后来一发不可收拾把其他常用组件也一并开发了. 相比于 React 还是更喜欢用 Vue ,除了目前社区组件不多,周边构建工具还是比较完善的(作者也特别勤奋). 下面话不多说了,来一看看详细的介绍吧. 先上图 创建项目 使用vue-cli 创建一个vue项目 安装vux
-
vue插件mescroll.js实现移动端上拉加载和下拉刷新
做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js //不要使用cnpm安装 导入(在哪个页面使用,则在哪个页面导入(这里的话,我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入)): import MescrollVue from 'mescroll.js/mescroll.vue' 注册组件: components: { Mes
-
dropload.js插件下拉刷新和上拉加载使用详解
本文实例为大家分享了dropload.js下拉刷新和上拉加载的具体代码,供大家参考,具体内容如下 第一步,下载dropload插件,dropload插件下载地址 官方文档:https://github.com/ximan/dropload 第二步,将下载好的dropload插件中的dropload.css,dropload.min.js文件引入到页面中,注意还要引入 Jquery1.7 以上 或者 Zepto 二选一,不要同时都引用,因为dropload是基于jquery实现的 第三步,将以下代
-
Flutter 给列表增加下拉刷新和上滑加载更多功能
有状态组件 当 Flutter 的页面需要动态更新数据的时候,就会涉及到 UI 组件需要根据数据变化更新,此时也就意味着组件有了"状态".这就类似 React 的类组件和函数组件(只是后续 React 使用了勾子函数实现了函数组件也可以有状态).在 Flutter 中,组件也分为无状态组件(StatelessWidget)和有状态组件(StatefulWidget),一般尽量使用无状态组件.但是如果组件本身需要维护自身状态的时候,就需要使用有状态组件了.有状态组件的定义形式如下: //
-
Android仿XListView支持下拉刷新和上划加载更多的自定义RecyclerView
首先给大家展示下效果图,感觉还不错,请继续往下阅读: 下拉刷新: 上划加载 在项目更新的过程中,遇到了一个将XListView换成recyclerView的需求,而且更换完之后大体效果不能变,但是对于下拉刷新这样的效果,谷歌给出的解决方案是把RecyclerView放在一个SwipeRefreshLayout中,但是这样其实是拉下一个小圆形控件实现的,和XListView的header效果不同.在网上找了很多的别人代码,都没有实现我想要的效果,于是自己动手写了一个.
-
vue移动端下拉刷新和上滑加载
本文实例为大家分享了vue移动端下拉刷新和上滑加载的具体代码,供大家参考,具体内容如下 组件 <template> <div class="mu-load-more" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)"> <div class="mu-re
-
基于iScroll实现下拉刷新和上滑加载效果
本文实例为大家分享了iScroll下拉刷新上滑加载展示的具体代码,供大家参考,具体内容如下 html代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=devi
-
原生js实现下拉刷新和上拉加载更多
本文实例为大家分享了js实现下拉刷新和上拉加载更多的具体代码,供大家参考,具体内容如下 1.下拉刷新 由于原生js太久不用了,这里列一下此处涉及到的前置知识点: 移动端触屏事件: touchstart(手指按下的一瞬间),touchmove(手指在屏幕上移动时),touchend(手指松开时) 手指在页面上的坐标: pageX,pageY 写之前首先要懂原理,下拉刷新的本质就是用户在页面顶部进行上拉动作时拉到一定的距离触发数据刷新. 大概需要做的几个点: 1.在手指按下时(touchstart)
-
H5基于iScroll实现下拉刷新和上拉加载更多
前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据而已,上拉是追加数据. 使用技巧 1.引用iScroll.js, 在初始化时添加两个事件监听:touchMove.DOMContentLoaded. 2.实现iScroll插件的onScrollEnd事件, 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加. 3.上拉加载更多请求后台时
-
Android RecyclerView实现下拉刷新和上拉加载
RecyclerView已经出来很久了,许许多多的项目都开始从ListView转战RecyclerView,那么,上拉加载和下拉刷新是一件很有必要的事情. 在ListView上,我们可以通过自己添加addHeadView和addFootView去添加头布局和底部局实现自定义的上拉和下拉,或者使用一些第三方库来简单的集成,例如Android-pulltorefresh或者android-Ultra-Pull-to-Refresh,后者的自定义更强,但需要自己实现上拉加载. 而在下面我们将用两种方式
-
MUI进行APP混合开发实现下拉刷新和上拉加载 原创
首先,我们的环境是使用HBuilder通过MUI开发APP,这种混合开发适合安卓和苹果两个平台,本次我们给大家写的代码是把上拉加载和下拉刷新单独分离开,一起来学习下. 为实现下拉刷新功能,大多H5框架都是通过DIV模拟下拉回弹动画,在低端android手机上,DIV动画经常出现卡顿现象(特别是图文列表的情况): 通过双webview解决这个DIV的拖动流畅度问题:拖动时,拖动的不是div,而是一个完整的webview(子webview),回弹动画使用原生动画:在iOS平台,H5的动画已经比较流畅
-
微信小程序实现页面下拉刷新和上拉加载功能详解
本文实例讲述了微信小程序实现页面下拉刷新和上拉加载功能.分享给大家供大家参考,具体如下: web手机端或App中经常会有下拉刷新,上拉加载这些功能. 微信小程序中如何实现下拉刷新,上拉加载的功能. 实现思路: 1.监听界面的下拉刷新事件和上拉加载事件 bindscrolltolower 监听上拉加载 bindscrolltoupper 监听下拉刷新 2.下拉刷新时清空数据列表,并重新请求数据进行界面展示. 3.上拉加载增量请求数据,增量增加数据列表,增量界面展示 效果图: 实现代码: Water