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

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

这节是上一节的升级版!

实现触摸效果

首先上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
      })
    }
  }
})

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值