当前位置: 首页 > 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

相关文章:

小程序多种姿势更换文章

概述 简单的文章切换demo&#xff0c;通过倒计时、摇一摇、双击进行文章切换 详细 直接看效果图吧&#xff01;比较简单&#xff0c;主要是练习一下... 小程序不带双击事件&#xff0c;可以记录第一次单击事件和第二次单机事件进行双击操作。 1、摇一摇是通过调用官方的 …...

读书笔记-《ON JAVA 中文版》-摘要25[第二十二章 枚举]

文章目录 第二十二章 枚举1. 基本功能1.1 基本 enum 特性 2. 方法添加2.1 方法添加2.2 覆盖 enum 的方法 3 switch 语句中的 enum4. values 方法的神秘之处5. 实现而非继承6. 随机选择7. 使用接口组织枚举8. 使用 EnumSet 替代 Flags9. 使用 EnumMap10. 常量特定方法11. 本章小…...

DNDC模型建模方法及应用

DNDC&#xff08;Denitrification-Decomposition&#xff0c;反硝化-分解模型&#xff09;是目前国际上最为成功的模拟生物地球化学循环的模型之一&#xff0c;自开发以来&#xff0c;经过不断完善和改进&#xff0c;从模拟简单的农田生态系统发展成为可以模拟几乎所有陆地生态…...

Kafka为什么是高性能高并发高可用架构

目录 1 前言2 顺序写入3 页缓存4 零拷贝5 Broker 性能6 流数据并行7 总结 1 前言 我们都知道 Kafka 是基于磁盘进行存储的&#xff0c;但 Kafka 官方又称其具有高性能、高吞吐、低延时的特点&#xff0c;其吞吐量动辄几十上百万。小伙伴们是不是有点困惑了&#xff0c;一般认为…...

QT-day3

完成文本编辑器的保存工作 void Widget::on_savebton_clicked() {QString fileName QFileDialog::getSaveFileName(this,"保存","./","All(*.*);;Images(*.png *.xpm *.jpg);;Text files (*.txt);;XML files (*.xml)");QFile file(fileName);i…...

开发自测的测试用例设计方法

测试用例设计方法有&#xff1a;等价类划分法、边界值分析法、错误推测法、判定表法、正交实验法。 测试用例就是一个文档&#xff0c;描述输入、动作、或者时间和一个期望的结果&#xff0c;其目的是确定应用程序的某个特性是否正常的工作。 一.等价类划分法 顾名思义&#x…...

【AI视野·今日Sound 声学论文速览 第七期】Tue, 19 Sep 2023

AI视野今日CS.Sound 声学论文速览 Tue, 19 Sep 2023 Totally 1 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers Frame-to-Utterance Convergence: A Spectra-Temporal Approach for Unified Spoofing Detection Authors Awais Khan, Khalid Mahmood Ma…...

MySQL 清空表 截断表

清空表&#xff1a;delete from users&#xff1b; 清空表只是清空表中的逻辑数据&#xff0c;但是物理数据不清除&#xff0c;如主键值、索引等不被清除&#xff0c;还是原来的值。 截断表&#xff1a;truncate table users&#xff1b; 截断表可以用于删除表中 的所有数据…...

2020-2023中国高等级自动驾驶产业发展趋势研究-中国高等级自动驾驶发展近况

1.2 中国高等级自动驾驶发展近况 通过对中国高等级自动驾驶行业的观察和分析&#xff0c;亿欧汽车认为&#xff0c;除技术解决方案提供商外&#xff0c;如今的车企、政府、资本同样在产业链中扮演重要角色。此外&#xff0c;车路协同技术的发展也为高等级自动驾驶的发展提供了更…...

Spring学习之ImportBeanDefinitionRegistrar接口

一、本文内容分类 1、接口功能 2、接口运用场景 3、使用案例 4、注意事项 二、接口功能介绍 描述&#xff1a;ImportBeanDefinitionRegistrar接口是也是spring的扩展点之一,它可以支持我们自己写的代码封装成BeanDefinition对象,注册到Spring容器中&#xff0c;功能类似于注…...

React 全栈体系(八)

第四章 React ajax 三、案例 – github 用户搜索 2. 代码实现 2.3 axios 发送请求 Search /* src/components/Search/index.jsx */ import React, { Component } from "react"; import axios from axiosexport default class Search extends Component {search …...

4.开放-封闭原则

这个原则其实是有两个特征&#xff0c;一个是说‘对于扩展是开放的(Open for extension)&#xff0c;另一个是说‘对于更改是封闭的(Closed for modification)[ASD]。...

oracle递归with子句

比如现在想获取开始日期到结束日期每个月的月底日期&#xff0c;这个时候可以通过递归实现&#xff1a; --通过递归with子句获取开始日期到结束日期每个月的月末日期 WITH date_range (month_start, month_end) AS (SELECT TRUNC(to_date(bdate,yyyy-mm-dd), MM),LAST_DAY(to_…...

如何在Proteus进行STM32F103C8T6模拟以及keil5开发

一、下载Proteus 8和keil5 最新版 Proteus 8.15 Professional 图文安装教程&#xff08;附安装包&#xff09;_proteus密钥_main工作室的博客-CSDN博客Keil uVision5 5.38官方下载、安装及注册教程_keil uvision5下载_这是乐某的博客-CSDN博客 二、新建STM32F103C8项目 接下来…...

C# OpenCvSharp 图片模糊检测(拉普拉斯算子)

效果 项目 代码 using OpenCvSharp; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Windows.Forms.VisualStyl…...

志高团队:广阔前景 全新的投资理财体验

当今时代,数字金融迅猛发展,投资理财领域正在经历前所未有的重大变革。作为加拿大华企联合会控股旗下的重要项目,恒贵即将启动,旨在为广大投资者带来全新的投资理财体验。这一创新项目的优势和广阔前景受到了业内观察机构的广泛关注和期待。 恒贵作为一家全新的P2C多元化投资理…...

基于自编译的onlyoffice镜像,关于修改字体的问题

基于自编译的onlyoffice镜像&#xff0c;关于修改字体的问题 自编译onlyoffice镜像来自于 https://blog.csdn.net/Gemini1995/article/details/132427908 该镜像里面没有documentserver-generate-allfonts.sh文件&#xff0c;所以需要自己创建一个&#xff08;建议放在/usr/b…...

1.wifi开发,wifi连接初次连接电脑没有识别,搭建环境

wifi连接初次连接电脑没有识别 1.不识别可能是线的问题&#xff0c;即使wifi的灯亮了&#xff0c;虽然串口却没有找到。所以解决方法就是重新来一个usb的线 一。初步使用 &#xff08;1&#xff09;使用ESP烧写工具&#xff08;选择esp8266&#xff09; &#xff08;2&#xf…...

【JAVA-Day25】解密进制转换:十进制向R进制和R进制向十进制的过程

解密进制转换&#xff1a;十进制向R进制和R进制向十进制的过程 一、什么是进制转换1.1 进制1.2 进制转换 二、十进制转R进制2.1 转换算法2.2 示例代码 三、R进制转十进制3.1 转换算法3.2 示例代码 四、总结参考资料 ) 博主 默语带您 Go to New World. ✍ 个人主页—— 默语 的…...

牛客网字节面试算法刷题记录

NC78 反转链表 public ListNode ReverseList (ListNode head) {if(headnull) return head;ListNode phead.next,q,tailhead;tail.next null;while(p!null){q p.next;p.next tail;tail p;p q;}return tail;} NC140 排序 冒泡排序 public int[] MySort (int[] arr) {for…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

家政维修平台实战20:权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

自然语言处理——循环神经网络

自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元&#xff08;GRU&#xff09;长短期记忆神经网络&#xff08;LSTM&#xff09…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...