# 触屏事件

# 触屏事件概述

• 移动端浏览器兼容性较好，我们不需考虑以前 JS 的兼容性问题，可以放心使用，我们放心得使用原生 JS 书写移动端自己得独特的地方，比如触屏事件 touch，Android 和 IOS 都有
• touch 对象代表了一个触摸点，触屏事件可响应应用对屏幕或者触屏版得操作
• 常见触屏事件

# 触摸事件对象（TouchEvent）

• TouchEvent 是一类描述手指再触摸平面（触摸屏，触摸板）的状态变化的事件，这类事件用于描述一个或者多个触点，使开发者可以检测点的移动，触点的增加和减少，等
• touchstart，touchmove，touchend 三个事件都会各自有事件对象
• 触摸事件对象重点我们看三个常见对象列表

# 移动端拖动元素

• touchstart，touchmove，touchend 可以拖动元素
• 但是拖动元素需要当前手指的坐标值，我们可以使用 targetTouches [0] 里面的 pageX 和 pageY
• 移动端移动原理：手指移动中，计算出手指移动的距离，然后用盒子原来的位置 + 手指移动的距离
• 手指移动的距离：手指滑动中的位置 - 手指刚开始触摸位置

拖动元素三部曲

• 触摸元素 touchstart：获取手指初始坐标，同时获取盒子原来位置
• 移动手指 touchmove：计算手指滑动距离，并且移动盒子
• 离开手指 touchend

** 注意：** 手指移动会触发屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault();

<script>

    var div = document.querySelector('div');

    var startX = 0;

    var startY = 0;

    var x = 0;

    var y = 0;

    div.addEventListener('touchstart',function(e){

        startX = e.targetTouches[0].pageX;

        startY = e.targetTouches[0].pageY;

        x = this.offsetLeft;

        y = this.offsetTop;

    })

    div.addEventListener('touchmove',function(e){

        var moveX = e.targetTouches[0].pageX - startX;

        var moveY = e.targetTouches[0].pageY - startY;

        this.style.left = x + moveX + 'px';

        this.style.top = y + moveY + 'px';

        e.preventDefault();     // 阻止屏幕移动的默认行为

    })

</script>

# 移动端常见特效

# classList 属性

classList 属性是 HTML5 所新增的一个属性，返回元素类名，但是 ie10 以上版本才支持

该属性用于元素中添加，移除及切换 CSS 类，有以下方法

# 添加类

element.classListadd (‘类名’)

focus.classList.add('current');

# 移动类

element.classList.remove (‘类名’)

focus.classList.remove('current');

# 切换类

element.classList.toggle (‘类名’)

focus.classList.toggle('current');

# click 延时解决方案

移动端 click 事件会有 300ms 的延迟，原因是移动端屏幕双击缩放（double tap to zoom）页面

解决方案

• 禁用缩放，浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟
• 利用 touch 事件自己封装这个事件解决的 300ms 延迟

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

原理：

• 当我们手指触摸屏幕，记录当时触摸时间
• 当我们手指离开屏幕，用离开的时间减少去触摸时间
• 如果时间小于 150ms，并且没有滑动过屏幕，我们就定义为点击

# 移动端常用开发软件

# 什么是插件

• 移动端要求是快速开发，所以我们经常会借助一些插件来帮我完成操作
• JS 插件就是 js 文件，它遵循一定的规范编写，方便程序展示效果，拥有特定功能且方法调用，如轮播图和瀑布流插件
• 特点：它是为了解决某个问题而单独存在的，功能单一，并且比较小巧

# fastclick 插件

# 引入文件

<script src="fastclick.js"></script>

# 使用

if ('addEventListener' in document) {

    document.addEventListener('DOMContentLoaded', function() {

        FastClick.attach(document.body);

    }, false);

}

# Swiper 插件的使用

# 引入插件相关文件

<!-- 引入 swipercss 文件 -->

<link rel="stylesheet" href="css/swiper.min.css">

<!-- 引入 swiper js 文件 -->

<script src="js/swiper.min.js"></script>

# 按照规定语法使用

window.addEventListener('load', function() {

    var swiper = new Swiper('.swiper-container', {

        spaceBetween: 30,

        centeredSlides: true,

        autoplay: {

            delay: 5000,

            disableOnInteraction: false,

        },

        pagination: {

            el: '.swiper-pagination',

            clickable: true,

        },

        navigation: {

            nextEl: '.swiper-button-next',

            prevEl: '.swiper-button-prev',

        },

    });

})

# 移动端常用开发框架

# 框架概述

• 框架，顾名思义就是一套框架，它会基于自身的特点向用户提供一套较为完整的解决方案，框架的控制在框架本身，使用者要按照框架规定的某种规范进行开发
• 插件是为了解决某个问题专门存在，功能单一，并且比较小
• 前端常用的开发框架有 Bootstrap，Vue，Angular，React 等，既能开发 PC，也能开发移动端
• 前端常用的移动端插件有 swiper，supersilde，iscrol 等
• 框架：大而全，一套解决方案
• 插件：小而专一，某个功能的解决方案

# Bootstrap

Bootstrap 是一个简洁，直观，强悍的前端开发框架，它让 web 开发更迅速，简单

它能开发 PC 端，也能开发移动端

Bootstrap JS 插件使用文件

• 引入相关 js 文件
• 复制 HTML 结构
• 修改对应样式
• 修改相关 JS 参数