touch滑动事件---简单小案例

html:

<!--导航栏头部-->
<div class="type_nav">
    <ul class="clearfix " v-on:touchstart="touch($event,1)"  v-on:touchmove="touch($event,2)" v-on:touchend="touch($event,3)">
        <li  v-for="(index,main) in mainList">
            <div class="nav_con" >
                <p>{{main.speciality_name}}</p>
                <img v-bind:src="main.icon" alt=""/>
            </div>
            <span></span>
        </li>
    </ul>
    <div class="right"></div>
</div>

vue-js:

data:{
    startPosition:"",        //触摸开始位置
    endPosition:"",          //触摸结束位置
    deltaX:null,            //滑动的距离
    flag:null,              //上次滑动的位置
    is_click:false,         //导航是否被点击
},

//移动端滑动事件
touch: function (e,type) {
    var touch = e.touches[0];
    //可移动最大宽度
    var maxWidth = parseFloat($(".type_nav").css("width"))*0.95;
    //隐藏小光标
    $(".type_nav").find("span").css("display","none");
    //判断触摸状态获取坐标
    if(type == 1){
        info_vue.startPosition = {
            x: touch.pageX
        };
    }else if(type == 2){
        info_vue.endPosition = {
            x: touch.pageX
        };
    }
    //判断结束坐标是否为空
    if(info_vue.endPosition.x == undefined){
        info_vue.deltaX = info_vue.flag;
    }else{
        info_vue.deltaX = (info_vue.endPosition.x - info_vue.startPosition.x) + info_vue.flag;
    }
    //判断是否点击向右滑动按钮
    if(!info_vue.rightbtnClick){
        //判断不能超出相应位置
        if(info_vue.deltaX < 0 && info_vue.deltaX > -maxWidth) {
        }else if(info_vue.deltaX > 0){
            info_vue.deltaX = 0;
        }else if(info_vue.deltaX < -maxWidth){
            info_vue.deltaX = -maxWidth;
        }
        $(".type_nav").children("ul").css("left", info_vue.deltaX + "px");
    }else{
        //判断不能超出相应位置
        if(info_vue.deltaX < maxWidth && info_vue.deltaX > 0) {
        }else if(info_vue.deltaX > maxWidth){
            info_vue.deltaX = maxWidth;
        }else if(info_vue.deltaX <0){
            info_vue.deltaX = 0;
        }
        $(".type_nav").children("ul").css("left", info_vue.deltaX-maxWidth + "px");
    }
    //离开触摸状态
    if(type == 3){
        info_vue.flag = info_vue.deltaX;
        info_vue.endPosition = "";
    }
},
效果图：