JavaScript-13-移动端特效

移动端触屏事件

概述

touch对象代表一个触摸点，触屏事件可响应触摸点触发的操作

触屏事件

1. touchstart 手指触摸到一个DOM元素时触发
2. touchmove 手指在一个DOM元素上滑动时触发
3. 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是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件，该类事件用于描述一个或多个触点，使开发者可以检测触点的移动、触点的增加和减少等等。

1. touches 正在触摸屏幕的所有手指的一个列表
2. targetTouches 正在触摸当前DOM元素上的手指的一个列表
3. changedTouches 手指状态发生了改变的列表，从无到有，从有到无变化

移动端拖动元素

1. 触摸元素，获得初始坐标
2. 移动元素，计算滑动距离
3. 离开元素

注：手指移动会触发滚动屏幕，要阻止默认的屏幕滚动 e.preventDefault();

常见的移动端特效

classList属性

1. 返回元素的类名
2. 添加类名：追加类名，不会覆盖以前的类名

element.classList.add(类名)

3. 删除类名：指定类名进行删除

element.classList.remove(类名)

5. 切换类名：有就去掉，没有就新增

element.classList.toggle(类名)

轮播图

1. 触摸元素touchstart：获取手指初始位置
2. 移动元素touchmove：计算手指滑动距离，移动元素
3. 离开元素touchend：根据移动距离判断是回弹还是播放上一张/下一张

返回顶部

1. 滚动到某个位置显示
2. 点击后页面滚动回原来的位置

click延时解决方案

由于移动端屏幕会缩放页面，移动端click事件会有300ms延时

解决方案：

1. 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟

<meta name = "viewport" content="user-scalable=no">

2. 利用touch事件自己封装事件解决300ms延迟

原理：

1. 当手指触摸屏幕，记录当前触摸事件
2. 当手指离开屏幕，用离开时的时间减去之前记录的触摸时间
3. 如果时间小于150ms，并且没有滑动过屏幕，就定义为点击

3. 使用插件：fastclick插件解决300ms延迟

移动端开发插件

概述

JS插件是JS文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用，如轮播图、瀑布流插件。

特点

为了解决某个问题而专门存在，功能单一，比较小

使用

1. 引入相关文件
2. 按照规定语法使用

移动端开发框架

概述

框架，就是一套架构，会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发

常用框架

Bootstrap、VUE、Angular、React等，既能开发PC端，也能开发移动端

插件与框架

框架：大而全，一整套解决方案
插件：小而专一，某个功能的解决方案