随着手机的不断发展,移动端页面已经逐渐成长起来,但对于移动端的手势事件并不是十分完善,并没有左右滑动事件。不过可以通过已存在的事件实现移动端页面的左右滑动事件。
移动端相关的事件:
touchstart
:手势触碰屏幕是触发该事件;
touchmove
:手指在屏幕中移动时触发该事件;
touchend
:手指离开屏幕时触发该事件。
实现代码如下:
//左右滑动翻页
this.$vrTable.on('touchstart', function (e) {
//touchstart事件
var $tb = $(this);
var startX = e.touches[0].clientX,//手指触碰屏幕的x坐标
pullDeltaX = 0;
$tb.on('touchmove', function (e) {
//touchmove事件
var x = e.touches[0].clientX;//手指移动后所在的坐标
pullDeltaX = x - startX;//移动后的位移
if (!pullDeltaX){
return;
}
e.preventDefault();//阻止手机浏览器默认事件
});
$tb.on('touchend', function (e) {
//touchend事件
$tb.off('touchmove touchend');//解除touchmove和touchend事件
//所要执行的代码
e.stopPropagation();
//判断移动距离是否大于30像素
if (pullDeltaX > 30 && that.pagerNum > 1){
//右滑,往前翻所执行的代码
}
//判断当前页面是否为最后一页
else if (pullDeltaX < -30 && that.pagerNum < that.$boxToggle.find('i').length){
//左滑,往后翻所执行的代码
}
});
});