当前位置: 首页 > news >正文

小程序多种姿势更换文章

概述

简单的文章切换demo,通过倒计时、摇一摇、双击进行文章切换

详细

直接看效果图吧!比较简单,主要是练习一下...

小程序不带双击事件,可以记录第一次单击事件和第二次单机事件进行双击操作。

1、摇一摇是通过调用官方的

2、wx.onAccelerometerChange这个加速度数据事件进行监听,进行切换页面...

3、倒计时就比较简单了,直接通过一个定时器进行监听,时间为0时切换文章,恢复时间,继续倒计时...

1625036665903.gif

部分代码:

1、摇一摇

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、倒计时

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、双击

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
})
},

项目结构图:

image.png

http://www.lryc.cn/news/170683.html

相关文章:

  • 读书笔记-《ON JAVA 中文版》-摘要25[第二十二章 枚举]
  • DNDC模型建模方法及应用
  • Kafka为什么是高性能高并发高可用架构
  • QT-day3
  • 开发自测的测试用例设计方法
  • 【AI视野·今日Sound 声学论文速览 第七期】Tue, 19 Sep 2023
  • MySQL 清空表 截断表
  • 2020-2023中国高等级自动驾驶产业发展趋势研究-中国高等级自动驾驶发展近况
  • Spring学习之ImportBeanDefinitionRegistrar接口
  • React 全栈体系(八)
  • 4.开放-封闭原则
  • oracle递归with子句
  • 如何在Proteus进行STM32F103C8T6模拟以及keil5开发
  • C# OpenCvSharp 图片模糊检测(拉普拉斯算子)
  • 志高团队:广阔前景 全新的投资理财体验
  • 基于自编译的onlyoffice镜像,关于修改字体的问题
  • 1.wifi开发,wifi连接初次连接电脑没有识别,搭建环境
  • 【JAVA-Day25】解密进制转换:十进制向R进制和R进制向十进制的过程
  • 牛客网字节面试算法刷题记录
  • QT连接Sqlite
  • ChatGPT AIGC 完成各省份销售动态可视化分析
  • 基于SpringBoot+Vue的餐饮管理系统设计与实现
  • 2023 亲测好用版VScode配置文件
  • jmeter基础压力教程
  • 图片格式大全
  • 5.14.1.2 Get Log Page – Smart Log
  • 【深度学习实验】线性模型(一):使用NumPy实现简单线性模型:搭建、构造损失函数、计算损失值
  • springcloud3 分布式事务-seata的四种模式总结以及异地容灾
  • 【办公类-16-06】20230901大班运动场地分配表-斜线排列、5天循环、不跳节日,手动修改节日”(python 排班表系列)
  • java学习--day13 (static关键字、异常)