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

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

touches    屏幕触点集合

targetTouches    touch事件绑定元素身上的触点集合

changesTouches    发生改变了的触点集合

以下引用segmentfault@pangpang的图:

手势

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

 

无缝滚动

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

具体实现看代码

    
    
    
    
    


    

        

            
1
            
2
            
3
            
4
        
    
    

效果

 

下拉或上拉

简单写一个类似iscroll的类，这里只实现了纵向的下拉或上拉，其实原理都差不多，实现起来不难，主要就是判断什么时候可以下拉，什么时候可以上拉，其余时候都是元素默认滚动（注意需要外包元素overflow样式值为auto）。

实现代码

    
    
    
    
    


    

        

            
Pretty row 1
            
Pretty row 2
            
Pretty row 3
            
Pretty row 4
            
Pretty row 5
            
Pretty row 6
            
Pretty row 7
            
Pretty row 8
            
Pretty row 9
            
Pretty row 10
            
Pretty row 11
            
Pretty row 12
            
Pretty row 13
            
Pretty row 14
            
Pretty row 15
            
Pretty row 16
            
Pretty row 17
            
Pretty row 18
            
Pretty row 19
            
Pretty row 20
            
Pretty row 21
            
Pretty row 22
            
Pretty row 23
            
Pretty row 24
            
Pretty row 25
            
Pretty row 26
            
Pretty row 27
            
Pretty row 28
            
Pretty row 29
            
Pretty row 30
            
Pretty row 31
            
Pretty row 32
            
Pretty row 33
            
Pretty row 34
            
Pretty row 35
            
Pretty row 36
            
Pretty row 37
            
Pretty row 38
            
Pretty row 39
        
    
    
    

效果

iscroll-probe.js下拉刷新

代码

    
    
    
    
    
    


    

        

            
1
            
2
            
3
            
1
            
2
            
3
            
1
            
2
            
3
            
1
            
2
            
3
            
1
            
2
            
3
            
1
            
2
            
3
            
1
            
2
            
3
            
1
            
2
            
3
            
1
            
2
            
3
        
        
下拉刷新
    
    点我
    
    

效果图

 

自己实现下拉更新

注：页面所有内容应该包在一个根盒子(container)中。

效果