微信小程序之<一> 单击, 双击, 长按

pages/test/button/index.js

// pages/test/button/index.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

 

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },

  /**************************************************** 按钮: 单击, 双击,滑动 长按 START *************************************************** */
  

  touchStartPoint: [0, 0],  // 触摸开始坐标 (屏幕左上角为坐标系原点, 向右为x轴, 向下为y轴)
  touchEndPoint: [0, 0],    // 触摸结束坐标 (屏幕左上角为坐标系原点, 向右为x轴, 向下为y轴)
  touchStartTime: 0,   // 触摸开始时间
  touchEndTime: 0,     // 触摸结束时间
  lastTapTime: 0,  // 最后一次单击事件点击发生时间
  lastTapTimeoutFunc: null, // 单击事件点击后要触发的函数


  // 触摸开始
  touchStart: function(e){
    console.log('touch start')
    console.log('坐标x: ' + e.touches[0].pageX)
    console.log('坐标y: ' + e.touches[0].pageY)
    let sx = e.touches[0].pageX
    let sy = e.touches[0].pageY
    this.touchStartPoint = [sx, sy] //坐标
    this.touchStartTime = e.timeStamp //时间点
  },

  // 触摸结束
  touchEnd: function (e) {
    console.log('touch end')
    //注意:触摸结束没有坐标监听事件,故读不到坐标点
    this.touchEndTime = e.timeStamp //时间点
  },

  // 长按tap
  longTap: function (e) {
    console.log("long tap")
    wx.showModal({
      title: '提示',
      content: '长按事件被触发',
      showCancel: false
    })
  },

  //单击tap或双击tap
  multipleTap: function(e){
    let diffTouch = this.touchEndTime - this.touchStartTime;
    let curTime = e.timeStamp;
    let lastTime = this.lastTapDiffTime;
    this.lastTapDiffTime = curTime;
    
      //两次点击间隔小于300ms, 认为是双击
      let diff = curTime - lastTime;
      if (diff < 300) {
        console.log("double tap")
        clearTimeout(this.lastTapTimeoutFunc); // 成功触发双击事件时，取消单击事件的执行
        wx.showModal({
          title: '提示',
          content: '双击事件被触发',
          showCancel: false
        })
      } else {
        // 单击事件延时300毫秒执行，这和最初的浏览器的点击300ms延时有点像。
        this.lastTapTimeoutFunc = setTimeout(function () {
          console.log("single tap")
          wx.showModal({
            title: '提示',
            content: '单击事件被触发',
            showCancel: false
          })
        }, 300);
      }
  },


  //滑动
  touchMove: function (e) {
    // let start = this.touchStartPoint[0]
    // let end = this.touchEndPoint[0]
    console.log('move');
    console.log('坐标x: ' + e.touches[0].pageX)
    console.log('坐标y: ' + e.touches[0].pageY)
    
  }

  /**************************************************** 按钮: 单击, 双击, 长按, 滑动 END *************************************************** */

}) 

 

pages/test/button/index.wxml

<view class='container'>
  
  <button class = "btn" type="primary" bindtouchstart="touchStart" bindtouchend="touchEnd" bindtap="multipleTap" bindlongtap="longTap">
        单击／双击／长按
  </button>

  <view class = "split"></view>
  <button class = "btn" type="primary" bindtouchstart="touchStart" bindtouchend="touchEnd" bindtouchmove="touchMove" >滑动</button>
</view>

pages/test/button/index.wxss

/* pages/button/index.wxss */

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height:100%;
}

.btn {
  width:670rpx;
  height:94rpx;
  line-height:94rpx;
  text-align:center;
  background-color:#1AAE18;
  color:#fff;
  border: 2rpx solid hsla(0, 0, 2, 0.8);
  border-radius:10rpx;
}

.split {
  margin-top:30rpx;
}