移动端touch事件实现无缝滚动及下拉刷新

pc端的鼠标事件写多了，但移动端没有鼠标，所以来写写移动端的touch事件。touch事件主要用到touchstart，touchmove，touchend三个事件，事件没什么好说的，做效果是最主要用到的是touch事件对象给我们提供的几个属性

touches 屏幕触点集合
targetTouches touch事件绑定元素身上的触点集合
changesTouches 发生改变了的触点集合

以下引用segmentfault@pangpang的图:

895887-20161012094941109-1469533517.png

手势

说到手势，那么可以确定当前至少有两个以上触点，下面就来简单的说说两个触点的旋转手势和缩放手势。其实很简单，在touchstart事件中确定两个触点（e.targetTouches[0]，e.targetTouches[1]）的初始坐标，然后在touchmove事件中得到移动后的两触点坐标，然后进行计算判断，下面是我画的计算图

截图20180809162452.png

截图20180809165307.png

无缝滚动

pc端的无缝轮播写了很多次了，其实移动端的无缝滚动原理也差不多。这世界没有真正的无缝滚动，都是些障眼法，在pc端要将第一个滑块复制一份加到最后，而移动端要将原来第一和最后一个滑块复制出来分别加到最后面和最前面。举例原来有四个滑块排列1、2、3、4，现在将它变成4、1、2、3、4、1共六块，如果当前touch事件target元素为第一个4时，则将当前可视区平移到第二个4，如果当前touch事件target元素为最后一个1时，则将当前可视区平移到第一个1。

具体实现看代码

    
    
    
    
    


    

        

            
1
            
2
            
3
            
4
        
    
    

效果

GIF.gif