原生js实现简单的下拉刷新功能
前言:
我们在浏览移动端web页面的时候,经常会用到下拉刷新。
现在我们用原生的js实现这个非常简单的下拉刷新功能。
(温馨提示:本文比较基础,功能也很简单。写的不好的地方,希望大神提点一二。)
一、创建简单的html页面:
假设代码里的float-box是一个主页面。
二、封装下拉刷新的功能模块:
(1)首先创建一个Slide构造函数,用来初始化属性与函数。
function Slide(dom){
this.start_y=null;//手指滑动屏幕的初始位置
this.end_y=null;//手指滑动屏幕的结束位置
this.render(dom);//初始化下拉功能的render函数,这里的dom参数是你的主页面。
}
(2)编写render函数
render函数是用来动态创建下拉刷新的动画图。现在我们在Slide原型上编写render函数。
Slide.prototype={
render:function(dom){
//拿到body节点
var body = document.getElementsByTagName('body');
//创建div,用来显示下拉效果。这个div有'正在刷新。。' 和 '下拉刷新' 这个两个子节点。
var newItem = document.createElement('div');
//给div设置class属性,该class是下拉效果的样式
newItem.className = 'slide-wrap';
//利用innerHTML将 '正在刷新。。。' 和 '下拉刷新' 这两个子节点插入到上面创建的div中。
newItem.innerHTML = '<div class="slided">正在刷新。。。</div>'+'<div class="sliding">下拉刷新</div>';
//然后将创建的div插入到主页面的前面
body[0].insertBefore(newItem,dom[0]);
//获取创建完成的下拉刷新div
var dom2 = document.getElementsByClassName('slide-wrap');
//运行slide_start()
this.slide_start(dom2);
}}
下图为下拉刷新的css样式:
(3)编写slide_start()函数
slide_start:function(dom2){
var _this = this;
//监听document整个文档的touchstart事件
document.addEventListener('touchstart',function(evt){
var touch = evt.touches[0]; //获取第一个触点
_this.start_y = Number(touch.pageY);//第一个触点的Y坐标
});
//运行slide_move
_this.slide_move(dom2);
}
(4)编写slide_move()函数
slide_move:function(dom2){
var _this = this;
//监听document的touchmove事件
document.addEventListener('touchmove',function(evt){
//下面这一行代码是保证在手指移动的距离还不到规定的长度时候,就不显示 '正在刷新。。'
dom2[0].childNodes[0].style.display='none';
var touch = evt.touches[0]; //获取第一个触点
//获取手指向下移动的长度距离
_this.end_y = Number(touch.pageY) - _this.start_y;
//判断手指移动距离是否大于5.这个为什么设置为5,而不是0呢,主要是为了避免用户不觉意的轻微滑动
if(_this.end_y > 5){
//当滑动距离大于5时,将 ‘下拉刷新’ 的效果显示出来,同时将它的高度赋值为手指滑动的距离,以达到慢慢下拉的效果
dom2[0].childNodes[1].style.display = 'block';
dom2[0].childNodes[1].style.height = _this.end_y +'px';
dom2[0].childNodes[1].style.lineHeight = _this.end_y +'px';
}
});
//执行slide_end()函数
this.slide_end(dom2);
}
(5)编写slide_end()函数
slide_end:function(dom2){
var _this = this;
//监听touchend事件
document.addEventListener('touchend',function(evt){
//当手指送开的时候,判断手指的滑动距离如果大于100就将 '正在刷新。。' 的效果显示出来,同时隐藏 '下拉刷新' 的效果
if(_this.end_y > 100){
dom2[0].childNodes[1].style.display='none';
dom2[0].childNodes[0].style.display='block';
console.log('开始刷新');
//这里是模拟3秒后刷新成功,然后隐藏 '正在刷新。。' 效果
setTimeout(function(){
dom2[0].childNodes[0].style.display='none';
},3000);
}else{
//这里是当手指滑动距离小于100时,就将 '下拉刷新' 效果隐藏。也就是什么也不做
dom2[0].childNodes[1].style.display = 'none';
}
});
}
(5)最后将Slide构造函数暴露到全局window里:
window.Slide=Slide;
整个下刷新功能到这了就完了。很简单吧。
下面是完整的封装代码。
;(function(){
function Slide(dom){
this.start_y=null;
this.end_y=null;
this.render(dom);
}
Slide.prototype={
// 动态创建下拉刷新特效
render:function(dom){
var body = document.getElementsByTagName('body');
var newItem = document.createElement('div');
newItem.className = 'slide-wrap';
newItem.innerHTML = '<div class="slided">正在刷新。。。</div>'+'<div class="sliding">下拉刷新</div>';
body[0].insertBefore(newItem,dom[0]);
var dom2 = document.getElementsByClassName('slide-wrap');
this.slide_start(dom2);
},
slide_start:function(dom2){
var _this = this;
document.addEventListener('touchstart',function(evt){
var touch = evt.touches[0]; //获取第一个触点
_this.start_y = Number(touch.pageY);
});
_this.slide_move(dom2);
},
slide_move:function(dom2){
var _this = this;
document.addEventListener('touchmove',function(evt){
dom2[0].childNodes[0].style.display='none';
var touch = evt.touches[0]; //获取第一个触点
_this.end_y = Number(touch.pageY) - _this.start_y;
if(_this.end_y > 5){
dom2[0].childNodes[1].style.display = 'block';
dom2[0].childNodes[1].style.height = _this.end_y +'px';
dom2[0].childNodes[1].style.lineHeight = _this.end_y +'px';
}
});
this.slide_end(dom2);
},
slide_end:function(dom2){
var _this = this;
document.addEventListener('touchend',function(evt){
if(_this.end_y > 100){
dom2[0].childNodes[1].style.display='none';
dom2[0].childNodes[0].style.display='block';
console.log('开始刷新');
setTimeout(function(){
dom2[0].childNodes[0].style.display='none';
},3000);
}else{
dom2[0].childNodes[1].style.display = 'none';
}
});
}
}
window.Slide=Slide;
})();
使用方法也很简单:在你的页面里new一个Slide()。并且将主页面的dom节点传进去即可。
var target = document.getElementsByClassName('float-box');
new Slide(target);
最后的效果如下图:
持续下拉的效果:
松开手指,正在刷新的效果:
当然,这效果是很丑,因为只是个小demo,所以css样式非常简单。你们可以自己发挥想象力,写更好看的css样式即可。
原生js实现简单的下拉刷新功能的更多相关文章
- js:基于原生js的上啦下啦刷新功能
链接:https://www.jianshu.com/p/a8392115e6f0演示地址:http://wonghan.cn/iscroll-demo/html:<body> <d ...
- 原生js手机端触摸下拉刷新
废话不多说,直接上代码,这里感谢我的好朋友,豆姐 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
- 原生js实现简单的下拉加载
#获取当前滚动条的高度document.documentElement.scrollTop #获取当前窗口的高度 document.documentElement.clientHeight #获取当前 ...
- Xamarin. Android实现下拉刷新功能
PS:发现文章被其他网站或者博客抓取后发表为原创了,给图片加了个水印 下拉刷新功能在安卓和iOS中非常常见,一般实现这样的功能都是直接使用第三方的库,网上能找到很多这样的开源库.然而在Xamarin. ...
- [转]Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能
版权声明:本文出自郭霖的博客,转载必须注明出处. 转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最近项目中需要用到L ...
- Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能 (转)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最 近项目中需要用到ListView下拉刷新的功能,一开始想图省事,在 ...
- android ListView上拉加载更多 下拉刷新功能实现(采用pull-to-refresh)
Android实现上拉加载更多功能以及下拉刷新功能, 采用了目前比较火的PullToRefresh,他是目前实现比较好的下拉刷新的类库. 目前他支持的控件有:ListView, ExpandableL ...
- 利用Swiperefreshlayout实现下拉刷新功能的技术探讨
在常见的APP中通常有着下拉页面从而达到刷新页面的功能,这种看似简单的功能有着花样繁多的实现方式.而利用Swiperefreshlayout实现下拉刷新功能则是其中比较简明扼要的一种. 一般来说,在竖 ...
- Android 高仿微信(QQ)滑动弹出编辑、删除菜单效果,增加下拉刷新功能
不可否认,微信.QQ列表的滑动删除.编辑功能着实很经典(从IOS那边模仿过来的),然.Android这边,对列表的操作,其实大多还停留上下文菜单来实现. Android如何实现list item的滑动 ...
随机推荐
- centos下kill、killall、pkill命令区别
kill是用来终止进程的 首先可以通过ps aux查看系统有哪些进程正在运行. 1.用kill来杀死某一个进程 #kill,加选项-9,加PID,表示杀死进程编号为PID的这个进程# -1 重启#ki ...
- 修改linux内核启动顺序
修改linux内核启动顺序 # 修改内核启动顺序x86_64 centos:cat /boot/grub2/grub.cfg |grep "menuentry" grub2-set ...
- C# WPF Border控件总结
Border控件不是一个布局面板,而是一个非常便于使用的元素,经常与布局面板一起使用.所以,在继续介绍其他布局面板之前,现在先介绍一下Border控件是有意义的. Border类非常简单.它只能包含一 ...
- 【计算机视觉】论文笔记:Ten years of pedestrian detection, what have we learned?
最近正在研究行人检测,学习了一篇2014年发表在ECCV上的一篇综述性的文章,是对行人检测过去十年的一个回顾,从dataset,main approaches的角度分析了近10年的40多篇论文提出的方 ...
- 开启httpfs
参考: https://docs.cloudera.com/documentation/enterprise/6/6.2/topics/admin_httpfs.html#xd_583c10bfdbd ...
- confluent部署:
confluent介绍https://www.cnblogs.com/dadadechengzi/p/9506964.html kafka connect:https://www.cnblogs.co ...
- [Python3] 039 语法调试
目录 语法调试 1. 调试技术 2. pdb 调试 插一个 gdb 3.Pycharm 调试 4. 单元测试 语法调试 1. 调试技术 调试流程 单元测试 → 集成测试 → 交测试部 分类: 静态调试 ...
- PTA(Basic Level)1030.完美数列
给定一个正整数数列,和正整数 p,设这个数列中的最大值是 M,最小值是 m,如果 M≤*m**p*,则称这个数列是完美数列. 现在给定参数 p 和一些正整数,请你从中选择尽可能多的数构成一个完美数列. ...
- Codeforces 1221B. Knights
传送门 看到棋盘上跳马,发现如果把棋盘黑白染色,那么每次移动都是从白点到黑点,从黑点到白点 所以直接根据黑白染色判断每个位置的马的颜色即可 #include<iostream> #incl ...
- nginx配置:静态访问txt文件
有一个A网站,访问的话会重定向跳转到B网站上,在A网站的nginx配置文件中配置的有如下: location / { rewrite ^/(.*) http://B/$1 redirect; } 现在 ...