移动端上下拖动调整顺序效果_HTML5 移动端的上下左右滑动问题

在移动端页面上，如果要实现【顶部轮播，手指触摸左右滑动】

我的方案是，通过监听滑动，阻止默认事件来完成

div.addEventListener('touchmove',function(event){

event.preventDefault();//阻止浏览器的默认事件

})

这样，左右滑动可以完成了，但是触摸这个div的时候，页面不能上下滑动了，怎么办？

当touchmove的时候，实时改变window的scrolltop值？

这样会有原生的滑动效果吗？

大家有什么解决方案

问题已经解决了，思路是

var xx,yy,XX,YY,swipeX,swipeY ;

div.addEventListener('touchstart',function(event){

xx = event.targetTouches[0].screenX ;

yy = event.targetTouches[0].screenY ;

swipeX = true;

swipeY = true ;

})

div.addEventListener('touchmove',function(event){

XX = event.targetTouches[0].screenX ;

YY = event.targetTouches[0].screenY ;

if(swipeX && Math.abs(XX-xx)-Math.abs(YY-yy)>0) //左右滑动

{

event.stopPropagation();//组织冒泡

event.preventDefault();//阻止浏览器默认事件

swipeY = false ;

//左右滑动

}

else if(swipeY && Math.abs(XX-xx)-Math.abs(YY-yy)<0){ //上下滑动

swipeX = false ;

//上下滑动，使用浏览器默认的上下滑动

}

})

可以判断下move大概方向，然后水平的时候阻止默认行为，其他时候不阻止就OK了

其实单纯判断move是水平也是不行的，如果用户是斜上地滑怎么判断？

我的想法是，在这个轮播上实现这样的一个覆盖层

当用户从A触发了touchstart 结束或者move到b，或者b start，在c上结束，判定为右滑。左滑则相反。

移动端上下拖动调整顺序效果_HTML5 移动端的上下左右滑动问题相关推荐

移动端上下拖动调整顺序效果_移动端上下滑动事件之--坑爹的touch.js
移动端页面的盛行,微信的便利的页面推广等等,让越来越多的css3效果和html5在手机端大放异彩. 于是乎,各式各样的简约酷炫的html5页面层出不穷,最多的就是视差滚动+css3动画. 接下来就说说 ...
移动端上下拖动调整顺序效果_vue实现移动端拖动排序
本文实例为大家分享了vue实现移动端拖动排序的具体代码,供大家参考,具体内容如下效果代码: class="childDiv" v-for="(option,index ...
【华为OD机试真题 python】特异性双端队列 | 最小调整顺序次数【2022 Q4 | 100分】
■ 题目描述 [特异性双端队列 | 最小调整顺序次数] 给定一个队列,但是这个队列比较特殊,可以从头部添加数据,也可以从尾部添加数据,但是只能从头部删除数据. 输入一个数字n,会依次添加数字1~n(也 ...
【特异性双端队列 | 最小调整顺序次数】
题目描述 [特异性双端队列 | 最小调整顺序次数] 给定一个队列,但是这个队列比较特殊,可以从头部添加数据,也可以从尾部添加数据,但是只能从头部删除数据. 输入一个数字n,会依次添加数字1~n(也就是 ...
css 波纹扩散_html5 +css3 点击后水波纹扩散效果兼容移动端
html5+ js +css3 点击后水波纹扩散效果兼容移动端-幸凡学习网 }.center{text-align:center}.btn{position:relative;width:13em; ...
【QT 5 设置自定义标题栏+学习：《QT实现鼠标拖动调整窗口大小》+基础样例】
[QT 5 设置自定义标题栏+学习:<QT实现鼠标拖动调整窗口大小>+基础样例] 1.说明 2.实验环境 3.实验目的 4.参考文章 5.实验步骤 (1)下载代码,运行没有错误. (2)加 ...
vue 修改div宽度_vue 拖动调整左右两侧div的宽度
原文是左中右三种情况的拖动.由于项目需要,我删除掉了右边的,直接左右区域拖动调整div宽度 1.拖动,调整左右两侧宽度西瓜备注2 西瓜备注2 export default { name: 'Da ...
WPF技术触屏上的应用系列（三）: 视频播放器的使用及视频播放、播放、暂停、可拖动播放进度效果实现...
WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放.播放.暂停.可拖动播放进度效果实现原文:WPF技术触屏上的应用系列(三): 视频播放器的使用及视频播放.播放.暂停.可拖动播放进度效果 ...
cocos2d-x初探学习笔记（11）--拖动间隐效果
小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 在游戏的实现过程中,我们有时会需要在某个游戏对 ...

移动端上下拖动调整顺序效果_HTML5 移动端的上下左右滑动问题

移动端上下拖动调整顺序效果_HTML5 移动端的上下左右滑动问题相关推荐

最新文章

热门文章