当前位置: 首页 > 编程日记 > 正文

echart x轴标签偏移_移动端H5页面滑动手势X轴实例

3af43eba5039d9fff74e87b3aa644203.png

话不多少,上代码。


let touchX = 0 // 默认初始值// 两行注释伪代码,绑定 touchstart 与 touchend 事件// dom.addEvenetListener('touchstart', touchStart)// dom.addEvenetListener('touchend', touchEnd)function touchStart(e) { // 手指触碰时候,重置 touchX 记录值 touchX = e.touches[0].clientX}function touchEnd(e) { // 松开手指时候,进行计算,这里设置偏移量大于 50 像素认为有意思切换,即 50 像素以内为误触 let offsetX = e.changedTouches[0].clientX - touchX if(offsetX < -50) swipeLeft() else if(offsetX > 50) swipeRight()}function swipeLeft() { console.log('手指左划,即页面内容向左滚动呈现右侧') }function swipeRight() { console.log('手指右划,即页面内容向右滚动呈现左侧') }

这点东西即可实现,无需代码库,若需要 Y 轴自行修改相应 X 为 Y 即可。

相关文章:

读书笔记(2) OpenLayers中的图层

OpenLayers有多个不同的图层类&#xff0c;每一个都可以连接到不同的地图服务器。例如通过Layer.WMS类可以连接到WMS地图服务器&#xff0c;通过Layer.Google类可以连接到谷歌地图服务器。OpenLayers中的每个图层都是独立的&#xff0c;对一个的操作不会影响到另外一个。 不管地…

自定义WPF窗体形状

介绍 你好WPF爱好者。 随着WPF等统一API语言的发明&#xff0c;丰富用户界面变得非常容易。 创建丰富的用户界面只是一个想法。 您需要拥有的是创造性思维和最新技术融合。 WPF和Expression Blend在制作丰富的UI应用程序&#xff0c;清晰的图形和非常好的动画方面非常有用。 背…

与jQuery的感情碰撞——由浅入深学jQuery

原来的时候自己看过jQuery&#xff0c;但是对于什么是jQuery&#xff0c;除了知道jQuery是一种javascript类库外&#xff0c;除了会用几个网页特效外&#xff0c;其他的我这真的是不知道啊。眼看自己就要找工作了&#xff0c;所以自己需要好好学习一下&#xff0c;系统的了解一…

线程互斥和同步-- 互斥锁

一. 线程分离我们一般创建的线程是可结合的&#xff0c;这个时候如果我们调用pthread_jion()去等待的话&#xff0c;这种等待的方式是阻塞式等待&#xff0c;如果主线程一直等待&#xff0c;主线程就无法做其他的事情了&#xff0c;所以应该使用线程分离&#xff0c;让子线程由…

calipso是什么意思_眰恦是什么意思?

展开全部眰恦作为一个不常见到的词&#xff0c;其实出自一本同名小说的书名。眰恦读作zh shng &#xff0c;在书中62616964757a686964616fe59b9ee7ad9431333433656665的意思就是&#xff0c;目光所至&#xff0c;心之所向&#xff0c;皆是你。眰&#xff0c;单字意思是视&#…

一个mongosee例子

var express require(express),mongoose require(mongoose); //引入mongoose模块 //连接mongodb数据库 nodejs为数据库名称 mongoose.connect(mongodb://localhost/nodejs);//获取Schema 以及 ObjectId 对象 var Schema mongoose.Schema,ObjectId Schema.ObjectId;//创建一…

mongoDB入门

**使用了不存在的对象&#xff0c;即创建该对象use db 使用db数据库 show dbs 查看当前服务器中写在磁盘上的数据库 show tables 查看数据库中的collection db 查看当前使用的数据库1.增删改查&#xff1a; 增&#xff1a;db.collection.insert({数据}) 自动生成 _id : ObjectI…

哈希--直接定值法和除留取余法

1. 哈希是一种算法&#xff0c;哈希表是用哈希算法构造出来的一种数据结构2. 哈希算方法的几种方法直接定值法 这里有一个例题&#xff0c;就是我们想判断某一字符串中&#xff0c;某一个字符出现的个数&#xff0c;我们可以使用哈希的思想&#xff0c;就是可以遍历一遍字符串&…

两条波浪线符号_四年级数学上册第二单元“线的认识”作业单(附带答案)

“线的认识”作业单一、线段、射线和直线。1.“线段、射线和直线”之间的联系与区别。名称形状长度端点关系2.表示方法&#xff1a;分别画出一条线段、射线和直线&#xff0c;并用字母进行表示。3.概念&#xff1a; (1) (2) (3) 二、相交与垂直1.概念&#xff1a;(1) (2)表示方…

CTime类小结1

参考&#xff1a;http://www.cnblogs.com/chuncn/archive/2009/03/12/1409261.html CTime类1&#xff0e;构造和初始化CTime类对象CTime类有下列构造函数&#xff1a;CTime&#xff08; &#xff09;;CTime&#xff08; const CTime& timeSrc &#xff09;;CTime&#xff0…

oracle数据库动态与静态注册

oracle数据库动态与静态注册 动态注册:1.服务名来自于参数文件中的service_names或者是db_name与db_domain的组合;2.实例名来自与参数文件中的instance_name;3.动态注册不需要listener.ora监听文件支持;4.实例状态为READY或BLOCKED;静态注册:1.服务名来自于监听文件中的GLOBAL_…

如何实现流畅观影体验?视频类应用内存和CPU大调查

如果把手机内存和CPU想象成固定面积的田地&#xff0c;单个应用对内存和CPU的占用则可比喻为个人的一亩三分地儿。当应用内存和CPU占用过高时&#xff0c;便过多占用了整个田地资源&#xff0c;挤压了邻家应用的面积&#xff0c;那么手机能够同时运行的应用的数量就会相应减少。…

dmol3给定关键字不在字典中_python中的数据结构与算法(2):字典与集合

1. 字典是什么字典是便于信息检索的一种数据结构&#xff0c;鉴于信息检索在程序中无处不在&#xff0c;字典的使用场景也非常广泛&#xff0c;包括许多 python 内部机制的实现&#xff0c;也依赖字典结构&#xff0c;比如命名空间的管理等。检索一般是根据关键字查找与它关联的…

HTTP项目1.0 -- HTTP协议基础知识

一. HTTP之URL篇首先来看一下&#xff0c;我们一般在上网的时候&#xff0c;地址栏中经常会显示的信息&#xff0c;这里就举一些简单的例子https://www.baidu.comhttps://113.2.7.58.25/a/b/c.html从上面的简单的例子我们把url分成了以后的几个部分&#xff0c;请看下图第一个协…

SQL Server 远程无法连接

1. 查看默认1433端口是否已经开启。转载于:https://www.cnblogs.com/jiajinyi/archive/2013/05/21/3091091.html

WCF客户端不能用在Using语句块中,因为它可能会抛出不可预知的异常。即使你捕获了异常,仍有可能一直保持连接。...

WCF客户端不能用在Using语句块中&#xff0c;因为它可能会抛出不可预知的异常。即使你捕获了异常&#xff0c;仍有可能一直保持连接。让我们来看看形成这一问题的历史原因&#xff0c;并提出几个补救措施。 在.NET中&#xff0c;资源管理的基础就是IDisposable和Using语句块。除…

关于 MongoDB 与 SQL Server 通过本身自带工具实现数据快速迁移 及 注意事项 的探究...

背景介绍 随着业务的发展、需求的变化&#xff0c;促使我们追求使用不同类型的数据库&#xff0c;充分发挥其各自特性。如果决定采用新类型的数据库&#xff0c;就需要将既有的数据迁移到新的数据库中。在这类需求中&#xff0c;将SQL Server中的数据导入到MongoDB 中显得尤为突…

语音计算矩形面积_LeetCode85-最大矩形

今天在制作书签的时候突然想到了一个问题如果要送给未来的女朋友一个书签上面该写些什么话哈哈哈哈哈哈哈哈哈The Spring is coming!想了一会儿&#xff0c;觉得这句话最合适To xxx:天使的笑&#xff0c;灿烂的心&#xff01;&#xff01;&#xff01;哎&#xff0c;还是先找个…

模板的分离编译

模板不支持分离编译我们来分析一下模板为什么不支持分离编译呢&#xff0c;所谓的分离编译就是我们在编写程序的时候可能会出现如下的一种情况就是&#xff0c;&#xff08;我下面就是举具体的例子了&#xff09;代码//*****************template.h***********// #include<i…

什么是壳 - 脱壳篇01

什么是壳 - 脱壳篇01 让编程改变世界 Change the world by program 壳 在自然界中&#xff0c;植物用壳来保护种子&#xff0c;动物用壳来保护身体&#xff0c;我们人类没有壳&#xff0c;但我们有衣服&#xff0c;房子也起到了壳的作用。不仅保护&#xff0c;而且美观。 同…

push、pop指令

push、pop指令转载于:https://www.cnblogs.com/LoveFishC/archive/2012/07/25/3846605.html

个人前端学习路线图与github优秀前端开发者的路线图推荐

1、个人目前学习的路线图 2、github优秀前端开发者的路线图推荐 打开github首页&#xff0c;在搜索框输入developer-roadmap&#xff0c;搜索github前端路线图 选择kamranahmedse/developer-roadmap拥有56.5k的星&#xff0c;足以证明这个路线受到广大前端开发者的喜爱与推荐 选…

智能指针1.0

一.使用普通的动态内存开辟存在的问题 我们在使用动态内存开辟一个空间的时候&#xff0c;需要释放掉这个空间&#xff0c;不然就容易出现内存泄漏。 比如下面的程序 情况一&#xff1a; #include<iostream> using namespace std; int errorTest() { intflag 0; …

gen_event中的handler和supervised handler

呃&#xff0c;在gen_event中有两个添加handler的方法 gen_event:add_handler/3 gen_event:add_sup_handler/3 一开始总是有些迷惑两者的区别&#xff0c;今天查看了gen_event源码&#xff0c;总算弄清两者的区别。 add_handler添加的只是把gen_event作为容器&#xff0c;仅仅在…

动态刷新_屋盖“起飞”刷新国内记录,中建八局杭州萧山国际机场项目最新动态来袭...

近日&#xff0c;中建八局承建的杭州萧山国际机场三期项目完成了一件“壮举”T4航站楼首段钢屋盖网架顺利提升至设计标高一举刷新了国内机场航站屋盖单次提升的记录正式进入主楼屋面及幕墙施工的新篇章两段视频速看首段钢屋架提升刷新记录 覆盖测量全过程监控杭州萧山国际机场…

逻辑 STANDBY ORA-00368日志应用失败处理一例

故障现象&#xff1a;逻辑STANDBY数据库注册日志成功&#xff0c;但应用日志出现错误&#xff0c;提示“ORA-00368: checksum error in redo log block”&#xff0c;显然是文件受到了破坏。Tue Jul 24 08:25:59 2012LOGMINER: WARNING: error 368 encountered, failed to read…

Linux 下实现虚拟光驱功能,查看iso文件内容

1,创建挂载点&#xff08;也可以不创建&#xff0c;直接用现有的目录&#xff09;openSUSE:~ # mkdir /mnt/iso2&#xff0c;挂载ISO文件至创建的挂载点openSUSE:~ # mount -t iso9660 -o loop /home/ubuntu-14.04.5-server-amd64.iso /mnt/isomount参数解释&#xff1a;-t&…

clientcontainerThrift Types

首先声明&#xff0c;我是一个菜鸟。一下文章中出现技术误导情况盖不负责 来自Apache Thrift官网&#xff1a;Thrift Types Thrift Types The Thrift type system is intended to allow programmers to use native types as much as possible, no matter what programming lang…

简易git操作 -- 让你的格子绿起来

创建github账号 浏览器输入网址&#xff0c;申请一个github账号&#xff0c;github申请网址&#xff0c;看到下面的图片内容&#xff0c;点击图中红色框里面的内容&#xff0c;用邮箱账号申请一个github账号&#xff0c;一定记住账号和密码 填写注册信息 点击之后跳转到下面…

c语言自定义char*函数返回值是乱码_[每日C语言」printf()函数的修饰符和返回值...

在上一个小demo《printf()函数(1)》中主要说了一下printf()函数的转换说明符&#xff0c;这些转移说明符是可以被修饰的。我们可以在%d和定义的转义字符之间通过插入修饰符对基本的转换说明加以修改。printf()修饰符digit(s) 字符宽度的最小值结果&#xff1a;不够的前面补空格…