微信小程序----侧滑导航触摸效果

上一节，我写了微信小程序之侧滑导航

这节是上一节的升级版！

实现触摸效果

首先上API：

touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发

然后就开始写思路：

首先我们看到API有几个接口

一个是手指触摸动作开始

手指触摸后移动

手指触摸动作结束

另外两个（暂用不上）

分析分析：

我们要做到手指触摸把左边的方框拉出来

其实就是怎样呢？就是记录我一开始手指触摸的时候获取到的坐标，然后和移动后的坐标来判断，我移动了多少

这样子，盒子就向外移动多少，但一松手，要么就盒子已经出来，要么就是盒子弹回去，取决于我们需要盒子出来多少宽度

基本上逻辑就是这样了

那么上代码：

这里要讲下：事件e---->是一个对象

所以我们要获取的是e.touches["0"].pageX

继续：

完整代码：

wxml：

<view class="page">
  <view class="page-top bindtouchstart='tab_start'
   bindtouchmove='tab_move' bindtouchend='tab_end' style='transform:{{index}}'>
    <image src='../images/daohang.png' bindtap='func'></image>
  </view>
  <view class="page-content">
    <view class='item'>
      <navigator url='../index3/index3'>我的页面</navigator>  
    </view>
    <view class='item'>
      <navigator url='../index3/index3'>我的页面</navigator>  
    </view>
    <view class='item'>
      <navigator url='../index3/index3'>我的页面</navigator>  
    </view>
  </view>
</view>

WXSS：

.page-content{
  height: 100%;
  width: 40%;
  background: red;
  position: fixed;
  padding-top: 100rpx;
  z-index: 0;
}
.item{
  color: white;
  padding: 50rpx 0 30rpx 30rpx;
}
.page-top{
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1;
  background: blue;
  transition: All 0.4s ease;
}
.page-top image{
  position: absolute;
  width: 70rpx;
  height: 70rpx;
  left: 20rpx;
  top: 20rpx;
}

JS：

// pages/index2/index2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    index:"scale(1) translate(0,0)",
    flag: true,//是否需要展开
    start: 0,//开始的点坐标
    end: 0,//结束的点的坐标
    distance:"",//拖动的距离
    max:113,//拖动的最大值
    isdrag:false//是否经过了拖动，增加是否拖动的布尔值是用来保证我单击展开的正确性
  },
  tab_start: function (e) {
    this.data.isdrag=false
    // start = e.touches["0"].pageX;
    this.data.start = e.touches["0"].pageX//获取一开始点的坐标
  },
  tab_move: function (e) {
    this.data.isdrag=true//确认经过拖动
    this.data.end = e.touches["0"].pageX//获取结束点的坐标
    this.data.distance = this.data.end - this.data.start//求拖动的距离
    //如果拖动的距离大于最大值，还是最大值
    if(this.data.distance<this.data.max){
      // this.data.index = "scale(1) translate(" +this.data.distance+",0)"
      this.data.distance+="px"
      this.setData({
        index: "scale(1) translate(" + this.data.distance + ",0)",
      })
    }
  },
  tab_end: function (e) {
    this.data.distance = this.data.end - this.data.start
    //拖动结束判断是否经过拖动，而且，拖动距离是否大于最大值。没有最大值收缩回去
    if(this.data.distance<=113 && this.data.isdrag){
    this.setData({
      flag:true,
      index: "scale(1) translate(0,0)"
    })
    }
    else if(this.data.isdrag){
      this.data.flag=false
    }
    this.data.isdrag=false
  },
  func: function () {
    if (this.data.flag) {
      this.setData({
        index: "scale(1) translate(30%,0)",
        flag:false
      })
    } else {
      this.setData({
        index: "scale(1) translate(0,0)",
        flag: true
      })
    }
  }
})