上一节，我写了微信小程序之侧滑导航
这节是上一节的升级版！
实现触摸效果
首先上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
})
}
}
})