微信小程序入门（二）

页面跳转：

小程序有两种页面跳转的方法。

（1） wx.redirectTo销毁当前页面跳转到另一个页面

（2） wx.navigateTo保留当前页面储存在页面栈，跳转到另一个页面

两者参数相同，url（需要跳转的路径），data（页面跳转传递的数据）success（跳转成功的回调）fail(跳转失败的回调)complete（跳转结束的回调）

实例：

wx.navigateTo({
  url:'../test/test?id=1&page=4',  //跳转页面的路径，可带参数   ？隔开，不同参数用 & 分隔；相对路径，不需要.wxml后缀
  data:{},  //参数
  success:function(){},        //成功后的回调；
  fail：function(){},          //失败后的回调；
  complete：function(){}      //结束后的回调(成功，失败都会执行)
  })

在另一个页面通过onLoad事件进行接收处理值

 /**  
  * 生命周期函数--监听页面加载   
  * */  
 onLoad: function (options) {
 	console.log(options);
  }

滑动事件：

通过三个事件来对滑动进行监听，确定用户滑动的方向来执行不同的事件。

（1） 首先定义三个参数分别滑动开始时X轴位置与Y轴位置，和一个文本标志滑动的方向。

 data: { lastX: 0,lastY: 0, text: "没有滑动" }

（2） 通过监听滑动开始事件记录开始时X轴位置与Y轴位置。

 //滑动开始事件 
  handletouchtart: function (event) {  
   	this.data.lastX = event.touches[0].pageX  
    	this.data.lastY = event.touches[0].pageY	 
  }

（3） 通过监听滑动移动事件判断移动方向

 //滑动移动事件  
 handletouchmove: function (event) {    
 var currentX = event.touches[0].pageX   
  var currentY = event.touches[0].pageY   
   var tx = currentX - this.data.lastX    
   var ty = currentY - this.data.lastY    
   var text = ""    //左右方向滑动    
   if (Math.abs(tx) > Math.abs(ty)) {      	
    if (tx < 0)       
    text = "向左滑动"      
    else if (tx > 0)        
    text = "向右滑动"   
     }   
    //上下方向滑动    
    else {      
     if (ty < 0)       
      text = "向上滑动"      
      else if (ty > 0)        
      text = "向下滑动"   
    }   
//将当前坐标进行保存以进行下一次计算    
  this.data.lastX = currentX    
  this.data.lastY = currentY    
  this.setData({   
     text: text,   
  }); 
}

（4） 通过监听滑动结束事件判断标志文本执行事件

  handletouchend: function (event) {
 	if (this.data.text == "向上滑动") {
 		//向上滑动你需要做什么
 	}  
 	if (this.data.text == "向下滑动") {
 		//向下滑动你需要做什么
 	}
 	if (this.data.text == "向左滑动") {
 	  	//向左滑动你需要做什么
	  }
	 if (this.data.text == "向右滑动") {
  		 //向右滑动你需要做什么
  	} 	
 }

（5） 在需要滑动事件的视图上加上这三个监听事件

<view  bindtouchstart = "handletouchtart" bindtouchmove="handletouchmove" bindtouchend="handletouchend">
</view>