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; }
请发表评论