js:基于原生js的上啦下啦刷新功能
链接:https://www.jianshu.com/p/a8392115e6f0演示地址:http://wonghan.cn/iscroll-demo/html:<body>
<div id="app">
<header id="header">
<input type="text" id="input">
<input type="submit" id="submit">
</header>
<article id="article">
<ul id="ul">
<li class="li" id="text">下拉刷新</li>
<li class="li">1</li>
<li class="li">2</li>
<li class="li">3</li>
<li class="li">4</li>
<li class="li">5</li>
<li class="li">6</li>
<li class="li">7</li>
<li class="li">8</li>
<li class="li">9</li>
<li class="li">10</li>
</ul>
</article>
</div>
</body>
css:
#article{
overflow: scroll;
position: relative;
}
#ul{
position: absolute;
}
上拉加载:
let ul = document.getElementById('ul'); // 获取ul列表
let div = document.getElementById('article') // 获取包裹ul列表的div(css: overflow:scroll;)
let num = 11; // 要添加的li文本,可自定义
let isLoad = false; // 节流阀辅助变量
// 添加li的方法,可自定义
function addLi() {
let fragment = document.createDocumentFragment();
for(let i=0;i<10;i++) {
let li = document.createElement('li');
li.className = 'li';
li.innerHTML = num++;
fragment.appendChild(li); // 用DocumentFragment提高渲染速度
}
ul.appendChild(fragment);
}
// 上拉加载
div.addEventListener('scroll',function(){
if(div.scrollHeight-div.scrollTop<1000 && isLoad===false) {
isLoad = true;
addLi();
setTimeout(function(){
isLoad = false;
},300) // 节流阀
}
},false);
js:下拉刷新:
let ul = document.getElementById('ul'); // 获取ul列表
let div = document.getElementById('article') // 获取包裹ul列表的div(css: overflow:scroll;)
let text = document.getElementById('text'); // 写着“下拉刷新”的元素
let start; // 辅助变量:触摸开始时,相对于文档顶部的Y坐标
let refresh = false; // 辅助变量:是否刷新
div.addEventListener('touchstart',function(event){
let touch = event.touches[0];
start = touch.pageY; // 辅助变量:触摸开始时,相对于文档顶部的Y坐标
},false);
div.addEventListener('touchmove',function(event){
// 下拉刷新
let touch = event.touches[0];
if(div.scrollTop<=0){
// 如果ul列表到顶部,修改ul列表的偏移,显示“下拉刷新”,并准备触发下拉刷新功能,可自定义
ul.style.top = ul.offsetTop + touch.pageY - start +'px'; // ul.style.top = ul.offsetTop + 'px'
start = touch.pageY;
// 若ul偏移量过大,则修改文字,refresh置为true,配合'touchend'刷新
if(ul.offsetTop>=100) {
text.innerHTML = "释放刷新";
refresh = true;
}
}
},false);
div.addEventListener('touchend',function(event){
// 若'touchend'时,ul偏移,用setInterval循环恢复ul的偏移量
if(ul.offsetTop>=0) {
let time = setInterval(function(){
ul.style.top = ul.offsetTop -3 +'px';
// 若ul的偏移量恢复,clearInterval
if(ul.offsetTop<=0){
clearInterval(time);
text.innerHTML = "下拉刷新";
// 若恢复时'refresh===true',刷新页面
if(refresh){
location.reload();
}
}
})
}
},false);
js:基于原生js的上啦下啦刷新功能的更多相关文章
- 基于原生JS封装数组原型上的sort方法
基于原生JS封装数组原型上的sort方法 最近学习了数组的原型上内置方法的封装,加强了用原生JS封装方法的能力,也进一步理解数组方法封装的过程,实现的功能.虽然没有深入底层,了解源码.以下解法都是基于 ...
- 用jQuery基于原生js封装的轮播
我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...
- 基于原生JS的jsonp方法的实现
基于原生JS的jsonp方法的实现 jsonp,相信大家并不陌生,是在js异步请求中解决跨域的方法之一,原理很简单,有不清楚的同学可以google下,这里就补详细解释了.在Jquery库中,jQuer ...
- 原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
- 基于原生js的图片延迟加载
当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...
- 基于原生js的返回顶部组件,兼容主流浏览器
基于原生js的返回顶部插件,兼容IE8及以上.FF.chrome等主流浏览器. js文件中封装了getScrollTop()和changeScrollTop()函数分别用于获取滚动条滚动的高度和修改滚 ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
- 基于SwiperJs的H5/移动端下拉刷新上拉加载更多
最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...
随机推荐
- 在<canvas>上绘制img(drawImage())时需要注意的事
<canvas>标签相当于是一个画布,css决定画布的样式(这块画布的背景颜色.大小等),脚本(一般使用JavaScript)就是画笔,我们可以在这个画布上绘制线条.形状.文字.图片等. ...
- MySQL Transaction--查看未提交事务执行的SQL
未提交事务 长期未提交事务,指开启事务后,长时间未向MySQL发出SQL执行请求或事务处理(COMMIT/ROLLBACK)请求,在系统表`information_schema`.`INNODB_TR ...
- Just nothing
I know that's I should do what I can to find a job But I can't focus on it I am always sad and I can ...
- mysql根据某个字符串拆分表中的字段,然后赋值给另外一个字段
sql语句示例: UPDATE user_info SET area_code = SUBSTRING_INDEX(telphone,'-',1) SUBSTRING_INDEX函数说明: subs ...
- python selenium-webdriver 登录验证码的处理(十二)
很多系统为了防止坏人,会增加各样形式的验证码,做测试最头痛的莫过于验证码的处理,验证码的处理一般分为三种方法 1.开发给我们设置一个万能的验证码: 2.开发将验证码给屏蔽掉: 3.自己识别图片的上的千 ...
- tomcat 闪退问题排查
由于启动tomcat回出现闪退情况,看不到异常 解决方法: 一. 打开startup.bat文件,在最下面 在文本的最后敲上pause,保存后重新运行startup.bat,这时候窗口会留在桌面上(调 ...
- 接口自动化 基于python+Testlink+Jenkins实现的接口自动化测试框架
链接:http://blog.sina.com.cn/s/blog_13cc013b50102w94u.html
- Web高级 Ajax和跨域CORS
Asynchronous JavaScript and XML 1. XMLHttpRequest 前端开发都知道,不多说. var xhr = new XMLHttpRequest(); xhr.o ...
- oracle 查询所有约束
主键约束SELECT USER_CONS_COLUMNS.CONSTRAINT_NAME AS 约束名, USER_CONS_COLUMNS.TABLE_NAME AS 表名, USER_CON ...
- 案例学编程系列:案例认识 Spring IOC
本文spring libs 地址:https://github.com/yizhiamumu/springlibs Spring 能帮我们做什么 ①.Spring 能帮我们根据配置文件创建及组装对象之 ...