摘要：国庆前几天花了点时间写一个整屏滑动的移动页面的，时间短暂还有很多东西没写。其中碰到的坑是的时间通过无法阻挡默认事件，只能，但是电脑上模拟移动页面可以使用
国庆前几天花了点时间写一个整屏滑动的移动页面的demo，时间短暂还有很多东西没写。
跟基友 http://segmentfault.com/blog/laopopo/1190000000708417 差不多，但思路上不太一样，大家可以看看他的源码感受一下其中的区别。
从监听开始，用一个变量记录触摸的起点位置，然后move的时候用move的触发的clientY的值减去起点位置，让页面滑动那个差值的距离，这个距离可能为负为正，然后end的时候判断需要往哪边修正位置。
end的时候我做的处理是先判断滑动的方向，（这个怎么判断呢？在move的时候用一个变量记录move的位置，然后用最后一个减去start的时候记录的位置，差值正负就是方向了）我预先计算了每一个div离页面最顶部的位置，然后倒序找第一个为负的元素，如果同时是向上滑动且下一个元素冒出头来的距离大于六分之一屏幕，就把下面的拉上来，如果同时是向下滑动且上一个元素冒出尾部的距离大于六分之一就把上面的拉下来。
其中碰到的坑是move的时间通过return false无法阻挡默认事件，只能e.preventDefault()，但是电脑上模拟移动页面可以使用return false
http://segmentfault.com/q/1010000000707907
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/87642.html
摘要：解说暴露到全局的方法，只要你引入，就可以得到这个实用牛逼的方法。设置页面展现为全屏滑动页面的方法。至此，一个全屏滑动网页就完成了，难以想象的简单快速。注意页数是从开始的，所以上面的最后一页是，而不是。如果想迫切试用，可以直接查看文档。 现在滑屏网页越来越多，比如我在搜狐视频就做了好几个，举个例子，可以用手机扫描以下的二维码访问： showImg(http://qianbao.baid...
摘要：前言本次给大家分享的是常见的移动端单点触摸事件的设计思路及实践。实现即手指滑动事件，应用场景如轮播图左右滑动切换，整屏页面滑动翻页等，算是移动端最常见的手势之一了。 前言 本次给大家分享的是常见的移动端单点触摸事件的设计思路及实践。 核心技术 主要就是利用移动端的以下3个触摸事件，来模拟和实现自定义的手势操作 touchstart：手指触摸到屏幕的一瞬间触发 touchmove：手指...
摘要：之前实习做的一个移动端的页面需要的功能有图片上传点击客户端的返回按钮有提示即与客户端有交互遇到不少的坑总结一下问题图片上传功能使用工具百度的暂时遇到的坑删除图片实际上并没有完全删除需要自己在源码上添加详情看的提问上传的图片旋转角度有问题比 之前实习做的一个移动端的页面 需要的功能有图片上传 点击客户端的返回按钮 有提示(即与客户端有交互） 遇到不少的坑 总结一下问题 1.图片上传功能 ...
摘要：我们在做移动端开发的时候经常遇到这样的需求界面背景要刚刚好在整个屏幕中，不能超出屏幕，而且肯定还有一些元素要固定在界面中某个位置。模拟开发整屏页面最近在做一个新页面的时候，我不满足于上面的方法，就想看看有没有别的解决办法。 我们在做移动端开发的时候经常遇到这样的需求：界面背景要刚刚好在整个屏幕中，不能超出屏幕，而且肯定还有一些元素要固定在界面中某个位置。 比如这样的设计图（720 x ...
摘要：解决方法设置即可其实所有的都会出现这个问题，浏览器会自动给元素的结尾添加一个空白字符大小和有关解决方法可以对父元素设置再在该元素里把设置回来的设置百分比是根据父元素的宽度来的。结语坑先挖这么点，以后碰到再陆续补充 前言 简单记录一下工作中经常碰到的css的一些坑，欢迎随时拍砖 水平居中 该元素是position:nomal, 父元素内block子元素定宽的情况下，对子元素采...
阅读 3062·2021-10-12 10:12
阅读 1569·2021-09-09 11:39
阅读 1845·2019-08-30 15:44
阅读 2339·2019-08-29 15:23
阅读 2898·2019-08-29 15:18
阅读 2960·2019-08-29 13:02
阅读 2688·2019-08-26 18:36
阅读 733·2019-08-26 12:08
