<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉刷新</title>
<style>
/* 下拉刷新的css样式 */
.slide-wrap{width:100%;}
.slide-wrap .sliding{
width:100%;
height:50px;
background:blue;
border-radius:0 0 50% 50%;
text-align: center;
font-size:20px;
display: none;
}
.slide-wrap .slided{
width:100%;
background:red;
line-height:50px;
text-align:center;
font-size:20px;
border-radius:0 0 50% 50%;
display: none;
}
.float-box{
width:100%;
height:500px;
background:pink;
}
</style>
</head>
<body>
<div class="float-box">float-box</div>
<script>
//封装下拉刷新的功能模块
(function(){
//1，首先创建一个slide构造函数，用来初始化属性与函数
function Slide(dom){
this.start_y=null;//手指滑动屏幕的初始位置
this.end_y=null;//手指滑动屏幕的结束位置
this.render(dom);//初始化下拉功能的render函数
}
//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);
// console.log(this)//this指向Slide构造函数
},
//3、编写slide-strat()函数
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坐标
console.log(this)//this指向document
console.log(_this)//_this指向Slide构造函数
});
// slide_move
_this.slide_move(dom2);//这边 用this也行
console.log(_this);//_this指向Slide构造函数
console.log(this)
},
//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';
}
});
}
}//Slide.prototype
//最后将Slide构造函数暴露到全局window
window.Slide=Slide;
})();//最外层的自执行函数
//使用方法
//在页面中new一个Slide()。并将主页的dom节点传进去即可
var target=document.getElementsByClassName('float-box');
new Slide(target);
 
</script>
</body>
</html>

原生js模仿下拉刷新功能的更多相关文章

  1. 手机端原生js实现下拉刷新数据

    HTML结构如下: <div class="outerScroller comment"> <div class='scroll comment'> < ...

  2. 原生JS实现下拉刷新

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8& ...

  3. 原生js实现简单的下拉刷新功能

    前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...

  4. vue10行代码实现上拉翻页加载更多数据，纯手写js实现下拉刷新上拉翻页不引用任何第三方插件

    vue10行代码实现上拉翻页加载更多数据,纯手写js实现下拉刷新上拉翻页不引用任何第三方插件/库 一提到移动端的下拉刷新上拉翻页,你可能就会想到iScroll插件,没错iScroll是一个高性能,资源 ...

  5. Android 高仿微信（QQ）滑动弹出编辑、删除菜单效果，增加下拉刷新功能

    不可否认,微信.QQ列表的滑动删除.编辑功能着实很经典(从IOS那边模仿过来的),然.Android这边,对列表的操作,其实大多还停留上下文菜单来实现. Android如何实现list item的滑动 ...

  6. Xamarin. Android实现下拉刷新功能

    PS:发现文章被其他网站或者博客抓取后发表为原创了,给图片加了个水印 下拉刷新功能在安卓和iOS中非常常见,一般实现这样的功能都是直接使用第三方的库,网上能找到很多这样的开源库.然而在Xamarin. ...

  7. [转]Android下拉刷新完全解析，教你如何一分钟实现下拉刷新功能

    版权声明:本文出自郭霖的博客,转载必须注明出处. 转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最近项目中需要用到L ...

  8. Android下拉刷新完全解析，教你如何一分钟实现下拉刷新功能 （转）

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最 近项目中需要用到ListView下拉刷新的功能,一开始想图省事,在 ...

  9. android ListView上拉加载更多 下拉刷新功能实现（采用pull-to-refresh）

    Android实现上拉加载更多功能以及下拉刷新功能, 采用了目前比较火的PullToRefresh,他是目前实现比较好的下拉刷新的类库. 目前他支持的控件有:ListView, ExpandableL ...

随机推荐

  1. 第六篇：Eclipse上运行第一个Hadoop实例 - WordCount(单词统计程序)

    需求 计算出文件中每个单词的频数.要求输出结果按照单词的字母顺序进行排序.每个单词和其频数占一行,单词和频数之间有间隔. 比如,输入两个文件,其一内容如下: hello world hello had ...

  2. 关于Kafka幂等producer的讨论

    众所周知,Kafka 0.11.0.0版本正式支持精确一次处理语义(exactly once semantics,下称EOS).Kafka的EOS主要体现在3个方面: 幂等producer:保证发送单 ...

  3. LINUX分辨率修改

    上次说过了如何搭建LINUX虚拟机环境,但是完成之后存在很多问题,屏幕分辨太小就是其中之一. 为了让各位能有一个舒心的工作环境,现在就教给大家LINUX系统更改屏幕分辨率的两个办法. 一.鼠标操作 1 ...

  4. Swift - 可选类型详解

    可选类型详解 直接上代码解释 // 类中所有的属性在对象初始化时,必须有初始化值 class Person : NSObject { var name : String? var view : UIV ...

  5. 安装win7到移动硬盘

    jpg改rar http://www.360doc.com/content/16/0816/10/19373891_583556875.shtml

  6. IOS设计模式第三篇之外观设计模式

    外观设计模式: 这个外观设计模式提供了一个单独的接口给复杂的子系统.而不是暴露用户的一组类和API,你仅仅暴露一个简单的同一的API. 下面的图片解释这个概念: API的用户根本不知道后面系统的复杂性 ...

  7. C# 反射的深入了解

    Assembly.Load("")的使用说明如下;     并不是命名空间.常用的是程序集名称,也就是dll的名称 关于反射Assembly.Load("程序集" ...

  8. 原生js--鼠标事件

    鼠标事件对象几个重要的属性: clientX 窗口坐标,加上垂直滚动可以得到文档纵坐标 clientY 窗口坐标,加上水平滚动可以得到文档横坐标 altKey boolean值,点击时是否按下了alt ...

  9. sencha touch 扩展官方NavigationView 灵活添加按钮组,导航栏,自由隐藏返回按钮(2014-5-15)

    扩展视频讲解:http://www.cnblogs.com/mlzs/p/3652094.html官方NavigationView详解:http://www.cnblogs.com/mlzs/p/35 ...

  10. CSS 让 fontawesome 图标字体变细

    一句 CSS 让 fontawesome 图标字体变细 自从 iOS 某个版本发布之后,前端的流行趋势是什么都越来越细…字体越来越细…图标线条也越来越细.而老物 fontawesome 粗壮的线条风格 ...