移动端特效
移动端触屏事件
概述
touch对象代表一个触摸点,触屏事件可响应触摸点触发的操作
触屏事件
- touchstart 手指触摸到一个DOM元素时触发
- touchmove 手指在一个DOM元素上滑动时触发
- touchend 手指从一个DOM元素上移开时触发
divLeft.addEventListener('touchstart', function() {
simpleflash(con, 30, 10, 10, function() {
divLeft.children[0].innerHTML = '<-';
});
});
divLeft.addEventListener('touchmove', function() {
simpleflash(con, 30, 10, 10, function() {
divLeft.children[0].innerHTML = '<-';
});
});
divLeft.addEventListener('touchend', function() {
simpleflash(con, -160, 10, 10, function() {
divLeft.children[0].innerHTML = '->';
});
});
触摸事件对象
TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件,该类事件用于描述一个或多个触点,使开发者可以检测触点的移动、触点的增加和减少等等。
- touches 正在触摸屏幕的所有手指的一个列表
- targetTouches 正在触摸当前DOM元素上的手指的一个列表
- changedTouches 手指状态发生了改变的列表,从无到有,从有到无变化
移动端拖动元素
- 触摸元素,获得初始坐标
- 移动元素,计算滑动距离
- 离开元素
注:手指移动会触发滚动屏幕,要阻止默认的屏幕滚动 e.preventDefault();
常见的移动端特效
classList属性
- 返回元素的类名
- 添加类名:追加类名,不会覆盖以前的类名
element.classList.add(类名)
- 删除类名:指定类名进行删除
element.classList.remove(类名)
- 切换类名:有就去掉,没有就新增
element.classList.toggle(类名)
轮播图
- 触摸元素touchstart:获取手指初始位置
- 移动元素touchmove:计算手指滑动距离,移动元素
- 离开元素touchend:根据移动距离判断是回弹还是播放上一张/下一张
返回顶部
- 滚动到某个位置显示
- 点击后页面滚动回原来的位置
click延时解决方案
由于移动端屏幕会缩放页面,移动端click事件会有300ms延时
解决方案:
- 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟
<meta name = "viewport" content="user-scalable=no">
- 利用touch事件自己封装事件解决300ms延迟
原理:
- 当手指触摸屏幕,记录当前触摸事件
- 当手指离开屏幕,用离开时的时间减去之前记录的触摸时间
- 如果时间小于150ms,并且没有滑动过屏幕,就定义为点击
- 使用插件:fastclick插件解决300ms延迟
移动端开发插件
概述
JS插件是JS文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用,如轮播图、瀑布流插件。
特点
为了解决某个问题而专门存在,功能单一,比较小
使用
- 引入相关文件
- 按照规定语法使用
移动端开发框架
概述
框架,就是一套架构,会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行开发
常用框架
Bootstrap、VUE、Angular、React等,既能开发PC端,也能开发移动端
插件与框架
框架:大而全,一整套解决方案
插件:小而专一,某个功能的解决方案