关于vue在移动端的使用

一、事件

1.Touch相关：

　　@touchstart：开始事件；@touchmove：移动事件；@touchend结束事件

<div @touchstart.stop.prevent="touchstart" @touchmove.stop.prevent="touchmove"  @touchend.stop.prevent="touchend"></div>

注：@touchstart.stop.prevent是用来阻止默认行为发生的，相当于在touchstart函数里面执行e.preventDefault()方法。常用于阻止系统滚动条、父级点击事件的回调等等

二、属性

1.Touch相关

touchstart: function (e) {
　　　　　　　var startX = e.touches[0].pageX;  // 点击(左键)的位置坐标(X轴)
            var startY = e.touches[0].pageY;  // 点击(左键)的位置坐标(Y轴)
        },

touchmove: function (e) {
            var moveEndX = e.changedTouches[0].pageX;  // (左键)按下拖动的距离(X轴)
            var moveEndY = e.changedTouches[0].pageY;  // (左键)按钮拖动的距离(Y轴)
            var val = 0px;
            $("#ti-content").animate({ scrollTop: val }, 10);  // JQ的动画效果,滚动到某个val位置，滚动速度是10
        },

 

 

 

待续、、