微信小程序左右滑动切换页面详解及实例代码
微信小程序——左右滑动切换页面事件
微信小程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。
这三个事件最重要的属性是pageX和pageY，表示X，Y坐标。
touchstart在触摸开始时触发事件;
touchend在触摸结束时触发事件;
touchmove触摸的过程中不断激发这个事件;
这三个事件都有一个timeStamp的属性，查看timeStamp属性，可以看到顺序是touchstart=>touchmove=>touchmove=>···=>touchmove=>touchend。
第一步：在wxml文件中绑定事件(需要左右滑动的界面)
<viewclass="container"bindtouchstart="touchStart"bindtouchmove="touchMove"bindtouchend="touchEnd"> //dosomething </view>
第二步：在js文件中处理左右滑动逻辑
vartouchDot=0;//触摸时的原点
vartime=0;//时间记录，用于滑动时且时间小于1s则执行左右滑动
varinterval="";//记录/清理时间记录
varnth=0;//设置活动菜单的index
varnthMax=5;//活动菜单的最大个数
vartmpFlag=true;//判断左右华东超出菜单最大值时不再执行滑动事件
//触摸开始事件
touchStart:function(e){
touchDot=e.touches[0].pageX;//获取触摸时的原点
//使用js计时器记录时间
interval=setInterval(function(){
time++;
},100);
},
//触摸移动事件
touchMove:function(e){
vartouchMove=e.touches[0].pageX;
console.log("touchMove:"+touchMove+"touchDot:"+touchDot+"diff:"+(touchMove-touchDot));
//向左滑动
if(touchMove-touchDot<=-40&&time<10){
if(tmpFlag&&nth<nthMax){//每次移动中且滑动时不超过最大值只执行一次
vartmp=this.data.menu.map(function(arr,index){
tmpFlag=false;
if(arr.active){//当前的状态更改
nth=index;
++nth;
arr.active=nth>nthMax?true:false;
}
if(nth==index){//下一个的状态更改
arr.active=true;
name=arr.value;
}
returnarr;
})
this.getNews(name);//获取新闻列表
this.setData({menu:tmp});//更新菜单
}
}
//向右滑动
if(touchMove-touchDot>=40&&time<10){
if(tmpFlag&&nth>0){
nth=--nth<0?0:nth;
vartmp=this.data.menu.map(function(arr,index){
tmpFlag=false;
arr.active=false;
//上一个的状态更改
if(nth==index){
arr.active=true;
name=arr.value;
}
returnarr;
})
this.getNews(name);//获取新闻列表
this.setData({menu:tmp});//更新菜单
}
}
//touchDot=touchMove;//每移动一次把上一次的点作为原点（好像没啥用）
},
//触摸结束事件
touchEnd:function(e){
clearInterval(interval);//清除setInterval
time=0;
tmpFlag=true;//回复滑动事件
},
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！