老师有个问题不太理解

设置了isSwiping=true，阻止了hammer.on('panend',function(){},false),但是在panend里有判断是否四舍五入的函数

function getIndexByDistance(distance) {
            if (distance > 0) {
                return 0;
            } else {
                //四舍五入
                return index = Math.round(-distance / slider.getDistancePerSlide());
                //0.6/1=0.6=1
                //0.4/1=0.4=0
            }
        }

，那为什么明明已经阻止了panend执行，还是能达到根据距离判断是否切换幻灯片的效果呢？

wsc6016922 2020-09-26

源自：移动端事件 4-9 幻灯片的操控部分--滑动切换

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2020-09-26 15:28:21

同学你好，对于你的问题解答如下：

先了解下为什么设置isSwiping变量，因为如果不设置这个变量，在滑动过程中同时触发
swipeleft和panend事件，可能导致一次性滑动两张幻灯片，效果不对，所以老师定义了这个变量，用来控制是否需要根据容器移动的距离来重新计算索引。
以向左滑动为例，讲解一下实现的思路，当你开始向左滑动的时候，如下：
（1）如果是快速的向左滑动，那么就会触发swiperLeft事件，将isSwiping值设置为true，这个时候就不会执行panend事件函数中，根据距离计算index这部分代码，只就执行panmove事件函数中的代码，直接切换到下一张关灯片。切换的动画完成之后才会将isSwiping值设置为false。
（2）如果是慢慢的拖动，那么就不会触发swiperLeft事件，isSwiping值默认为false，那么就会执行panend事件函数中，根据距离计算index这部分代码，根据拖动的距离是否超过了一半，计算index值，实现切换效果。
同学可以结合讲解，自己在每个事件中使用console.log语句输出测试的打印结果，结合代码效果多测试几次，帮助自己更好的理解，示例：

祝学习愉快~

收起回答

好帮手慕慕子 2020-09-26 13:57:32

同学你好，因为在幻灯片滑动过程中会一直触发panmove事件，在该事件中实现了幻灯片的切换功能。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

提问者 wsc6016922 #1

老师我还是不太理解，判断图片拖动是否超过一半来决定索引的函数getIndexByDistance在panend中，panmove中没有这个函数阿，那么滑动的过程中就算超过一半index应该也不会自动变化才对，我的理解是根据容器移动距离，获取索引的函数getIndexByDistance只在panend中调用过，那么panend被禁止后，应该就失去识别是否拖动超过一半改变索引的功能了。

2020-09-26 14:45:21