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