智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏（capacitive touch-sensitive screen），以捕捉用户的手指所做的交互。

随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法来处理这些事件。例如，几乎所 有的快节奏游戏都需要玩家一次按下多个按钮，这种方式，在触摸屏情况下，意味着多点触摸。

Zepto touch框架使用

**API: //www.zeptojs.cn/#modules**
第一步： 设置viewport
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
第二步： 通过bower安装zepto.js,touch.js 到项目目录中
 bower install zepto.js
第三步： 下载 zepto.touch.js
https://github.com/madrobby/zepto/blob/master/src/touch.js#files
第四步: 引用zepto.js,touch.js文件到应用中
<script src="../libs/zepto.js/dist/zepto.js"></script><script src="../libs/zepto.js/src/touch.js"></script>
第五步: 使用zepto.js的手势
<script>
(function(){
   
    var index =0; //索引
    var btns = $(".pageNums span").length;
    $(".picList").swipeLeft(function(){
        index++;
        if(index >=btns-1){
            index = btns-1;
        }
        var dis = -index * window.screen.width;
        $(".picList").css({"transition":"1s linear"});
        $(".picList").css({"transform":"translateX("+dis+"px)"});
 
        $(".pageNums span").removeClass("active").eq(index).addClass("active");
 
    }).swipeRight(function(){
        index--;
        if(index <0){
            index =0;
        }
        var dis = -index * window.screen.width;
        $(".picList").css({"transition":"1s linear"});
        $(".picList").css({"transform":"translateX("+dis+"px)"});
 
        $(".pageNums span").removeClass("active").eq(index).addClass("active");
 
    })
 
})()</script>

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！