1.获取手指滑动的长度:

 var hasTouch = 'ontouchstart' in window && !isTouchPad,
 _start:function(e){
      var point = hasTouch ? e.touches[0] : e;
      startY = point.pageY;
 }
 _move:function(e){
      var point = hasTouch ? e.touches[0] : e;
      //offsetY就是手指滑动的垂直距离
      offsetY = point.pageY - startY;
 }

通过offsetY>0表示手指下拉,offsetY<0表示手指上拉。

h5移动端滑动的细节的更多相关文章

  1. H5移动端的注意细节

    1. max-width用在pc端页面,max-device-width用在移动设备上 2. device-pixel-ratio 设备像素比 3.设备自己单位-物理单位dp/dip css像素 px ...

  2. 移动端H5页面惯性滑动监听

    移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...

  3. RE:通过移动端滑动手势实现数据加载

      背景:         基于要尝试的移动端项目需要有一个通过上拉下滑手势达成加载不同数据的功能,其涉及到滑动手势和ajax数据加载方面的知识点.故对整个实现过程做一个记录整理.个人JS功底有限,看 ...

  4. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  5. 基于SwiperJs的H5/移动端下拉刷新上拉加载更多

    最早时,公司的H5项目中曾用过点击一个"加载更多"的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页 ...

  6. 10天学会phpWeChat——第七天:创建一个自适应PC网站+H5移动端的模块

    本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系 ...

  7. H5移动端知识点总结

    H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解display:box的布局 理解flex布局 Flex布局兼容知识点总结 回到顶部 移动开 ...

  8. 一个H5的3D滑动组件实现(兼容2D模式)

    起由 原始需求来源于一个项目的某个功能,要求实现3D图片轮播效果,而已有的组件大多是普通的2D图片轮播,于是重新造了一个轮子,实现了一个既支持2D,又支持3D的滑动.轮播组件. 实现思路 刚一开始肯定 ...

  9. 旅行app(游记、攻略、私人定制) | 顺便游旅行H5移动端实例

    <顺便游旅行>是一款H5移动端旅行app,提供目的地(国内.国外.周边)搜索.旅游攻略查询.游记分享.私人定制4大模块,类似携程.同程.去哪儿.马蜂窝移动端,只不过顺便游app界面更为简洁 ...

随机推荐

  1. 使用D3绘制图表(2)--绘制曲线

    上一篇是使用D3绘制画布,这一篇的内容是在画布上绘制曲线. 1.之前的html代码没有变化,但是我还是贴出来 <!DOCTYPE html> <html> <head&g ...

  2. Ubuntu下基于Nginx实现Tomcat集群负载均衡

    版权声明:本文为博主原创文章,未经博主允许不得转载.   目录(?)[+]   Nginx是一款HTTP和反向代理服务器,有关它的介绍可以到网上搜一下,很多很多,不再累述.这里,我们记录一下Nginx ...

  3. iOS开发,应用间的跳转

    预习:URL由两部分组成-- 1.scheme:协议头(http://  ftp:// 等等) 2.path:路径(URL中path可以没有) 一.简单实现跳转到指定APP(也就是说跳转到的APP必须 ...

  4. 【奶昔队ROUND#1】

    奶昔队Round #1 热身 (奶昔队不是真正的队,是群) CodeForces 435C Cardiogram 模拟,不过我做的时候不是模拟,是计算...(写了好久,还wa了几次),现在看了别人的代 ...

  5. 网络爬虫2--PHP/CURL库(client URL Request Library)

    PHP/CURL库功能   多种传输协议.CURL(client URL Request Library),含义是“客户端URL请求库”. 不像上一篇所用的PHP内置网络函数,PHP/CURL支持多种 ...

  6. 如何使用TestFlight进行Beta测试

    假如你现在完成一个App的开发并准备进行真机测试,那么请问你会怎么做呢?难道是直截了当的把App扔到App Store上然后下载来试试?当然,如果你的App相当简陋,这么做的话无可厚非.不过如果你要做 ...

  7. PL/SQL连接Oracle客户端步骤

    首先,安装oracle,再安装plsql 打开plsql——>选择“首选项(preferences)”——>输入oracle客户端路径 如下图:

  8. Hadoop 权威指南学习1 (主要框架)

    1. Hadoop 最出名的是 MapReduce和 HDFS,不过也有很多其他有用的子项目. 技术栈如下: Core 一系列分布式文件系统和通用I/O的组件和接口(序列化.Java RPC和持久化数 ...

  9. 【BZOJ-2599】Race 点分治

    2599: [IOI2011]Race Time Limit: 70 Sec  Memory Limit: 128 MBSubmit: 2590  Solved: 769[Submit][Status ...

  10. 【BZOJ-4568】幸运数字 树链剖分 + 线性基合并

    4568: [Scoi2016]幸运数字 Time Limit: 60 Sec  Memory Limit: 256 MBSubmit: 238  Solved: 113[Submit][Status ...