触屏事件

移动端浏览器兼容性较好，无需考虑JS兼容问题，但是移动端也有自己独特之处，比如触屏事件touch?（也称触摸事件）Android和IOS都有

touch对象代表一个触摸点 ，触屏事件可响应用户手指（或触控笔）对屏幕或触控板操作

?触摸事件对象（TouchEvent）

TouchEvent描述手指在触摸平面的状态变化的事件，用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少

移动端轮播图

移动端轮播图功能和PC端基本一致

可以自动播放图片手指可以拖动播放轮播图 功能实现

一、自动播放功能

开启定时器移动端移动，使用translate要想图片优雅的移动，添加过渡

二、无缝滚动

我们判断条件要等到图片滚动完再去判断，就是过渡完之后此时需要添加检测过渡完成事件 transitionend判断条件：如果索引号等于最后一张图片，此时索引号复原为0此时图片去掉过渡效果，然后移动如果索引号小于0，说明是倒着走，索引号为最后一张图片此时图片去掉过渡然后移动

三、小圆点跟随变化效果

把 ol 里面 li 带有current类名的选出来去掉类名 remove让当前索引号的小 li 加上current add但是 ， 是等过渡结束之后变化 ， 所有这个写到 transitionend 事件里面

四、手指滑动轮播图

本质就是 ul 跟随手指移动 ， 就是移动端拖动元素触摸元素 touchstart：获取手指初始坐标移动手指 touchmove： 计算手指移动距离 ， 并且移动盒子离开手指 touchend：根据滑动的距离分不同的情况如果移动距离小于某个像素，就回弹原来位置如果移动距离大于某个像素，就上一张下一张滑动

五、返回顶部

当页面滚动到某个部位就显示，否则隐藏点击可以返回顶部事件：scroll 页面滚动事件如果被卷去的头部（window . pageYOffset）大于某个数值点击window . scroll(0,0) 返回顶部 classList属性

是H5新增的一个属性，返回元素的类名 ie10以上支持，可以在元素中添加，移除，切换CSS类

添加类：

element . classList . add（‘类名’）? ? ? （在后面追加类，不会覆盖前面的类名，注意前面无需加.）

移除类：

element . classList . remove（‘移除类名’）

切换类：

element . classList . toggle（‘类名’）

click延时解决方案

移动端click事件会有 300ms 的延时 ， 原因是移动端屏幕双击会缩放页面

禁用缩放功能

利用touch事件自己封装这个事件解决300s延迟 ?原理：当手指触摸屏幕 ， 记录当前触摸时间手指离开屏幕 ， 用离开时间减去触摸时间如果时间小于150ms 并且没有滑动过屏幕 ， 那就定义为点击

?使用插件 本地存储

特性：

数据存储在用户浏览器中设置、读取方便、页面刷新不丢失数据容量大只能存储字符串 ， 可将对象JSON . stringify（）编码后存储 window.sessionStorage 生命周期为关闭浏览器窗口在同一个窗口下数据可以共享以键值对的形式存储

存储数据：

sessionStorage.setltem(key,value)

获取数据

sessionStorage.getItem(key)

删除数据

sessionStorage.removeItem（key）

删除所以数据

sessionStorage.clear（） window.localStorage 生命周期永久有效 ， 除非手动删除可以多窗口共享以键值对的形式存储

存储数据

localStorage.setitem(key,value)

获取数据

localStorage.getItem（key）

删除数据

localStorge.removeItem（key）

删除所有数据

localStorage.clear（）

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。