微信小程序如何切换当前页面

微信小程序通过左右滑动切换当前页面，实现方法：

在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;//回复滑动事件
},

上一篇：小程序页面是用什么组件开发的

下一篇：如何申请免费域名