微信小程序之<一> 單擊, 雙擊, 長按

 

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;
}