js仿手机页面文件下拉刷新效果


Posted in Javascript onOctober 14, 2016

最后弄出了一个简单的下拉刷新页面的形式,还不算太复杂

要在仿真器下才能看到效果,比如chrome的里边(或者用手机浏览器查看,但测试发现有些浏览器有问题,目前手机猎豹是没问题的)

js仿手机页面文件下拉刷新效果

js仿手机页面文件下拉刷新效果

js仿手机页面文件下拉刷新效果

js仿手机页面文件下拉刷新效果

主要就是:

下拉-->提示松开刷新-->松开后-->开始刷新-->刷新成功后还原

html,css部分

style type="text/css">
 #slideDown{margin-top: 0;width: 100%;}
   #slideDown1,#slideDown2{width: 100%;height: 70px;;background: #e9f4f7;display: none;}
   #slideDown1{height: 20px;}
   #slideDown1>p,#slideDown2>p{margin: 20px auto;text-align:center;font-size: 14px;color: #37bbf5;}
</style>


 <div id="content">
  <div id="slideDown">
   <div id="slideDown1">
    <p>松开刷新</p>
   </div>
   <div id="slideDown2">
    <p>正在刷新 ...</p>
   </div>
  </div>
  <div class="myContent">
   <ul>
    <li>item1 -- item1 -- item1</li>
    <li>item2 -- item2 -- item2</li>
    <li>item3 -- item3 -- item3</li>
    <li>item4 -- item4 -- item4</li>
    <li>item5 -- item5 -- item5</li>
    <li>item6 -- item6 -- item6</li>
    <li>item7 -- item7 -- item7</li>
   </ul>
  </div>
 </div>

js部分:

主要就是为一个节点绑定事件,可以是整个body,按照实际来看

k_touch()函数是主要代码,目前主要涉及三个事件,touchstart  touchmove  touchend

这里获取touch点坐标是用pageX,pageY 当然不兼容的话先不考虑

因为是下滑才刷新,所以稍微控制一下way,其实也就是通过这个控制是获取pageX 还是pageY

滑一滑可以直接看到dist的变化,其实就把它看做px了吧

js仿手机页面文件下拉刷新效果

更多的功能,以后再说吧..

<script type="text/javascript">
 //第一步:下拉过程
 function slideDownStep1(dist){ // dist 下滑的距离,用以拉长背景模拟拉伸效果
  var slideDown1 = document.getElementById("slideDown1"),
   slideDown2 = document.getElementById("slideDown2");
  slideDown2.style.display = "none";
  slideDown1.style.display = "block";
  slideDown1.style.height = (parseInt("20px") - dist) + "px";
 }
 //第二步:下拉,然后松开,
 function slideDownStep2(){ 
  var slideDown1 = document.getElementById("slideDown1"),
   slideDown2 = document.getElementById("slideDown2");
  slideDown1.style.display = "none";
  slideDown1.style.height = "20px";
  slideDown2.style.display = "block";
  //刷新数据
  //location.reload();
 }
 //第三步:刷新完成,回归之前状态
 function slideDownStep3(){ 
  var slideDown1 = document.getElementById("slideDown1"),
   slideDown2 = document.getElementById("slideDown2");
  slideDown1.style.display = "none";
  slideDown2.style.display = "none";
 }

 //下滑刷新调用
 k_touch("content","y");
 //contentId表示对其进行事件绑定,way==>x表示水平方向的操作,y表示竖直方向的操作
 function k_touch(contentId,way){ 
  var _start = 0,
   _end = 0,
   _content = document.getElementById(contentId);
  _content.addEventListener("touchstart",touchStart,false);
  _content.addEventListener("touchmove",touchMove,false);
  _content.addEventListener("touchend",touchEnd,false);
  function touchStart(event){ 
   //var touch = event.touches[0]; //这种获取也可以,但已不推荐使用

   var touch = event.targetTouches[0];
   if(way == "x"){ 
    _start = touch.pageX;
   }else{ 
    _start = touch.pageY;
   }
  }
  function touchMove(event){ 
   var touch = event.targetTouches[0];
   if(way == "x"){ 
    _end = (_start - touch.pageX);
   }else{ 
    _end = (_start - touch.pageY);
    //下滑才执行操作
    if(_end < 0){
     slideDownStep1(_end);
    }
   }

  }
  function touchEnd(event){ 
   if(_end >0){ 
    console.log("左滑或上滑 "+_end);
   }else{ 
    console.log("右滑或下滑"+_end);
    slideDownStep2();
    //刷新成功则
    //模拟刷新成功进入第三步
    setTimeout(function(){ 
     slideDownStep3();
    },2500);
   }
  }
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
Web开发之JavaScript
Mar 29 Javascript
js格式化货币数据实现代码
Sep 04 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
vue使用v-model进行跨组件绑定的基本实现方法
Apr 28 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
前端js实现文件的断点续传 后端PHP文件接收
Oct 14 #Javascript
js关于getImageData跨域问题的解决方法
Oct 14 #Javascript
AngularJS 与Bootstrap实现表格分页实例代码
Oct 14 #Javascript
深入学习js瀑布流布局
Oct 14 #Javascript
微信小程序 地图定位简单实例
Oct 14 #Javascript
Bootstrap作品展示站点实战项目2
Oct 14 #Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 #Javascript
You might like
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
2012/04/07 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
2014/05/23 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
2014/12/02 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Python实现类的创建与使用方法示例
2017/07/25 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
分享8点超级有用的Python编程建议(推荐)
2019/10/13 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
python利用opencv实现颜色检测
2021/02/23 Python
CSS3 transform的skew属性值图文详解
2014/07/21 HTML / CSS
FORZIERI澳大利亚站:全球顶级奢华配饰精品店
2016/12/31 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
毕业设计指导教师评语
2014/12/30 职场文书
医者仁心观后感
2015/06/17 职场文书
工作自我评价范文
2019/03/21 职场文书
想创业成功,需要掌握这些要点
2019/12/06 职场文书