[js]hammer.js手势冲突问题

冉娃娃 2017-12-04 12:43:45
hammer版本2.08

问题描述:
想实现滑动门效果.....
向左/右拖动图片,拖曳图片的时候,图片跟着手指移动(pan),,当松开的时候,滑动到下一张图片(swipe).
但是,在滑动到下一张图片后,又产生了一次pan事件...
最终效果就是,滑动到下一张图片后,图片又偏移了一段距离..
这种手势冲突的问题怎么解决呢?


html,body, ul, li, img {
margin: 0;
padding: 0;
overflow: hidden;
}
ul {
list-style: none;
}
ul.animation {
transition: transform 1s;
}
li {
float: left;
}
img {
width: 100%;
}



<ul>
<li><img src="/img/1.jpg" alt="1"></li>
<li><img src="/img/2.jpg" alt="2"></li>
<li><img src="/img/3.jpg" alt="3"></li>
<li><img src="/img/4.jpg" alt="4"></li>
<li><img src="/img/5.jpg" alt="5"></li>
</ul>



var App = function() {
var lis = document.querySelectorAll('li');
var ul = document.querySelector('ul');
var index = 0;
//设置ul,li宽度
var setWidth = function() {
lis.forEach(function(li) {
li.style.width = window.innerWidth + 'px';
})
ul.style.width = window.innerWidth * 5 + 'px';
};
this.initial = function() {
window.onload = setWidth;
window.addEventListener('onorientationchange', setWidth);
};
//显示指定li
var showLi = function(i) {
if (!ul.classList.contains('animation')) {
ul.classList.add('animation');
}
//循环
// index = index > (lis.length - 1) ? 0 : index < 0 ? lis.length - 1 : index;
//不循环
index += i;
index = Math.max(Math.min(lis.length - 1, index), 0);
var offset = -index * window.innerWidth + 'px';
ul.style.transform = 'translate(' + offset + ',0)';
};
//画面跟随移动
var followFinger = function(e) {

};
var handlerMove = function(e) {
switch (e.type) {
case "swipeleft":
showLi(1);
break;
case "swiperight":
showLi(-1);
break;
case "panleft":
case "panright":
if (ul.classList.contains('animation')) {
ul.classList.remove('animation');
}
var offsetWidth = -window.innerWidth*index;
ul.style.transform = 'translate('+(offsetWidth+e.deltaX)+'px,0)';
break;
}
console.log(e.type);
}
//触摸事件
var hammertime = new Hammer(ul);
hammertime.on('swipeleft swiperight panleft panright', handlerMove);
};
var xx = new App();
xx.initial();
...全文
141 1 点赞 打赏 收藏 举报
写回复
1 条回复
切换为时间正序
当前发帖距今超过3年,不再开放新的回复
发表回复
冉娃娃 2017-12-04
javascript功底还比较差,看插件源代码比较吃力 英文水平也一般,官方文档也没找到处理这种情况的直接说明
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript
加入

8.5w+

社区成员

Web 开发 JavaScript
申请成为版主
帖子事件
创建了帖子
2017-12-04 12:43
社区公告
暂无公告