Overview
Simple article switching demo, switch articles through countdown, shake, and double-click
detailed
Just look at the renderings! It's relatively simple, mainly just practice...
The applet does not have a double-click event. It can record the first click event and the second stand-alone event for double-click operations.
1. Shake is by calling the official
2. Monitor the acceleration data event wx.onAccelerometerChange and switch pages...
3. The countdown is relatively simple. Monitor it directly through a timer. When the time is 0, switch the article, restore the time, and continue the countdown...
Part of the code:
1. Shake it
function a() {
wx.onAccelerometerChange(function (res) {
var curTime = new Date().getTime()
var SHAKE_THRESHOLD = 60
var last_update = that.data.last_update
if ((curTime - last_update) > 100) {
var diffTime = curTime - last_update;
var speed = Math.abs(res.x + res.y + res.z - that.data.last_x - that.data.last_y - that.data.last_z) / diffTime * 10000;
if (speed > SHAKE_THRESHOLD && !determination) {
determination = true
determination = that.random()
}
that.setData({
last_update: curTime,
last_x: res.x,
last_y: res.y,
last_z: res.z
})
}
})
}2. Countdown
onLoad: function (option) {
this.random()
let that = this
setInterval(()=>{
let newTime = that.data.time
newTime--;
if(newTime<=0){
that.random()
that.setData({
time:60
})
}else{
that.setData({
time:newTime
})
}
},1000)
},3. Double-click
doubleClick: function (e) {
var curTime = e.timeStamp
var lastTime = e.currentTarget.dataset.time // 通过e.currentTarget.dataset.time 访问到绑定到该组件的自定义数据
// console.log("上一次点击时间：" + lastTime)
// console.log("这一次点击时间：" + curTime)
if (curTime - lastTime > 0) {
if (curTime - lastTime < 300) { //是双击事件
// console.log("挺快的双击，用了：" + (curTime - lastTime))
this.random()
}
}
this.setData({
lastTapTime: curTime
})
},Project structure diagram:
