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. android之ViewPager的使用

    XML代码 <android.support.v4.view.ViewPager   ViewPager控件        android:layout_width="wrap_con ...

  2. nutch-介绍

    本文主要源于http://www.ibm.com/developerworks/cn/opensource/os-cn-nutchintro/ 基本信息 Nutch是一个开放源代码(open-sour ...

  3. Android系统Surface机制的SurfaceFlinger服务渲染应用程序UI的过程分析

    参考:Android系统Surface机制的SurfaceFlinger服务渲染应用程序UI的过程分析 一句话概括一下Android应用程序显示的过程:Android应用程序调用SurfaceFlin ...

  4. pycharm使用错误排查

    1.pip安装扩展包报错 creating build/temp.linux-x86_64-3.4 x86_64-linux-gnu- -Wformat -Werror=format-security ...

  5. Android Studio 2.2的新鲜事

    转载:http://mp.weixin.qq.com/s?__biz=MzAwODY4OTk2Mg==&mid=2652039482&idx=1&sn=9aa9b204af34 ...

  6. Leetcode 376. Wiggle Subsequence

    本题要求在O(n)时间内求解.用delta储存相邻两个数的差,如果相邻的两个delta不同负号,那么说明子序列摇摆了一次.参看下图的nums的plot.这个例子的答案是7.平的线段部分我们支取最左边的 ...

  7. bzoj1724: [Usaco2006 Nov]Fence Repair 切割木板

    #include <iostream> #include <cstdio> #include <cstring> #include <algorithm> ...

  8. 为GitHub项目加入Travis-CI的自动集成

    可以参考这篇文档进行集成:https://docs.travis-ci.com/user/languages/csharp/,只需要三步: 1.创建.travis.yml 2.写入标签 3.试着提交你 ...

  9. 论github客户端的使用与团队协作

    首先:如果你觉得小编写的一般般,那你就默念小编是渣渣,我相信你就会好起来的 -------------------------------------------------------------- ...

  10. Android程序设计-简单手机通讯录

    在微信中,手机QQ中你会发现软件读取手机通讯录这个功能,这个功能使得软件更好的与手机联系人绑定,从而达到分享,拨打电话,读取用户信息等操作.下面我们将通过一个demo实现这个功能 首先我们看一下效果图 ...