JavaScript WebAPI 系列七移动端常见特效；classList属性；click延迟插件；Wwiper

1.0 移动端常见特效

1.1 案例：移动端轮播图

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

可以自动播放图片手指可以拖动播放轮播图

案例分析很多：可以去看笔记

2.1 classList 属性

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

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

返回元素类名：

element.classList[0] （返回第一个类名字，class可以设置多个类名）

添加类：

element.classList.add(‘current’);

移除类：

element.classList.remove(‘current’);

切换类：

element.classList.toggle(‘current’);

注意:以上方法里面，所有类名都不带点

// classList 返回元素的类名var div = document.querySelector('div');// console.log(div.classList[1]);// 1. 添加类名是在后面追加类名不会覆盖以前的类名注意前面不需要加.div.classList.add('three');// 2. 删除类名div.classList.remove('one');// 3. 切换类var btn = document.querySelector('button');btn.addEventListener('click', function() {document.body.classList.toggle('bg');})

2.2 click 延时解决方案以及fastclick插件

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

解决方案：

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

（ <meta name=“viewport” content=“user-scalable=no” ）

利用touch事件自己封装这个事件解决 300ms 延迟。

原理就是：

1.当我们手指触摸屏幕，记录当前触摸时间

2.当我们手指离开屏幕，用离开的时间减去触摸的时间

3.如果时间小于150ms，并且没有滑动过屏幕，那么我们就定义为点击

//封装tap，解决click 300ms 延时function tap (obj, callback) {var isMove = false;var startTime = 0; // 记录触摸时候的时间变量obj.addEventListener('touchstart', function (e) {startTime = Date.now(); // 记录触摸时间});obj.addEventListener('touchmove', function (e) {isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击});obj.addEventListener('touchend', function (e) {if (!isMove && (Date.now() - startTime) < 150) {// 如果手指触摸和离开时间小于150ms 算点击callback && callback(); // 执行回调函数}isMove = false; // 取反重置startTime = 0;});}//调用 tap(div, function(){// 执行代码 });

使用插件。 fastclick 插件解决 300ms 延迟。

1. 引用JS文件， 2.复制这一套代码就行了什么都不用改if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}var div = document.querySelector('div');div.addEventListener('click', function() {alert(11);})

3.0 移动端常用开发插件

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

**特点：**它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

我们以前写的animate.js 也算一个最简单的插件

fastclick 插件解决 300ms 延迟。使用延时

GitHub官网地址： /ftlabs/fastclick

3.1 插件的使用

引入 js 插件文件。按照规定语法使用。

fastclick 插件解决 300ms 延迟。使用延时

GitHub官网地址： /ftlabs/fastclick

if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}

3.2 Swiper 插件的使用（轮播图插件）

中文官网地址： /

引入插件相关文件。按照规定语法使用

3.3 其他移动端常见插件

superslide： /iscroll： /cubiq/iscroll

3.4 插件的使用总结

确认插件实现的功能去官网查看使用说明下载插件打开demo实例文件，查看需要引入的相关文件，并且引入复制demo实例文件中的结构html，样式css以及js代码

3.5 练习-移动端视频插件 zy.media.js

H5 给我们提供了 video 标签，但是浏览器的支持情况不同。不同的视频格式文件，我们可以通过source 解决。但是外观样式，还有暂停，播放，全屏等功能我们只能自己写代码解决。这个时候我们可以使用插件方式来制作。

4.0 移动端常用开发框架

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

插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能开发PC端，也能开发移动端

前端常用的移动端插件有 swiper、superslide、iscroll等。

框架：大而全，一整套解决方案

插件：小而专一，某个功能的解决方案

4.1 Bootstrap开发框架

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

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

Bootstrap JS插件使用步骤：

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

5.0 本地存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。

本地存储特性：

数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage约5M、localStorage约20M只能存储字符串，可以将对象JSON.stringify()编码后存储

5.1 本地存储—window.sessionStorage

生命周期为关闭浏览器窗口在同一个窗口(页面)下数据可以共享以键值对的形式存储使用

1.存储数据：sessionStorage.setItem(key, value)

2.获取数据：sessionStorage.getItem(key)

3.删除数据：sessionStorage.removeItem(key)

4.删除所有数据：sessionStorage.clear()

5.2 本地存储—window.sessionStorage

声明周期永久生效，除非手动删除否则关闭页面也会存在可以多窗口（页面）共享（同一浏览器可以共享）以键值对的形式存储使用

1.存储数据：localStorage.setItem(key, value)

2.获取数据：localStorage.getItem(key)

3.删除数据：localStorage.removeItem(key)

4.删除所有数据：localStorage.clear()

JavaScript WebAPI 系列七移动端常见特效；classList属性；click延迟插件；Wwiper轮播图插件；视频插件；开发框架等本地存储

JavaScript WebAPI 系列七 移动端常见特效；classList属性；click延迟插件；Wwiper