第十三章：移动端网页特效

第十三章：移动端网页特效

13.1：触屏事件

• 触屏事件概述

  移动端浏览器兼容性比较好，我们不需要考虑以前JS的兼容性问题，可以放心的使用JS书写效果，但是移动端也自己独特的地方。比如触屏事件touch(也称触摸事件)，Android和IOS都有。

  touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。

  常见的触屏事件如下：

  触屏touch	说明
  touchstart	手指触摸到一个DOM元素时触发
  touchmove	手指在一个DOM元素上滑动时触发
  touchend	手指从DOM元素上移开时触发

• 触摸事件对象(TouchEvent)

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

  touchstart、touchmove、touchend三个事件都会各自有事件对象。

  触摸事件对象重点我们看三个常见对象列表：

  触摸列表	说明
  touches	正在触摸屏幕的所有手指的一个列表
  targetTouches	正在触摸当前DOM元素上的手指的一个列表(重点)
  changedTouches	手指状态发生了改变的列表，从无到有，从有到无变化

• classList属性

  classList属性时HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加，移除及切换CSS类。有以下方法：

  1. 添加类：element.classList.add('类名')

     div.classList.add('three');
     

  2. 移除类：element.classList.remove('类名')

     div.classList.remove('one');
     

  3. 切换类：element.classList.toggle('类名')

     div.classList.toggle('bg');
     

• click延迟解决方案

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

  解决方案：

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

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

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

     原理是：

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

     function tap (obj, callback) {//封装tap，解决click 300ms 延时
     	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) {
     		// 如果手指触摸和离开时间小于150ms 算点击
     		if (!isMove && (Date.now() - startTime) < 150) { 
     			callback && callback(); // 执行回调函数
     		}
     		isMove = false;  //  取反 重置
     		startTime = 0;
     	});
     }
     tap(div, function(){   // 执行代码  });//调用  
     

13.2：本地存储

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

本地存储特性：

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

• window.sessionStorage

  1. 声明周期为关闭浏览器窗口。
  2. 在同一个窗口(页面)下数据可以共享。
  3. 以键值对的形式存储使用。

  存储数据：sessionStorage.setltem(ksy, value)

  获取数据：sessionStorage.getltem(key)

  删除数据：sessionStorage.removeltem(key)

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

• window.localStorage

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

  存储数据：localStorage.setltem(ksy, value)

  获取数据：localStorage.getltem(key)

  删除数据：localStorage.removeltem(key)

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