• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

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

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序组件下拉刷新发布时间:2022-07-18
下一篇:
SpringMVC的环境搭建和入门小程序发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap