1.1. 觸屏事件

1.1.1 觸屏事件概述

移動(dòng)端瀏覽器兼容性較好昧甘，我們不需要考慮以前 JS 的兼容性問(wèn)題良拼，可以放心的使用原生 JS 書寫效果，但是移動(dòng)端也有自己獨(dú)特的地方充边。比如觸屏事件 touch（也稱觸摸事件）庸推，Android 和 IOS 都有。touch 對(duì)象代表一個(gè)觸摸點(diǎn)浇冰。觸摸點(diǎn)可能是一根手指贬媒，也可能是一根觸摸筆。觸屏事件可響應(yīng)用戶手指（或觸控筆）對(duì)屏幕或者觸控板操作湖饱。

常見的觸屏事件如下：

image.png

1.1.2 觸摸事件對(duì)象（TouchEvent）

TouchEvent 是一類描述手指在觸摸平面（觸摸屏掖蛤、觸摸板等）的狀態(tài)變化的事件。這類事件用于描述一個(gè)或多個(gè)觸點(diǎn)井厌，使開發(fā)者可以檢測(cè)觸點(diǎn)的移動(dòng)蚓庭，觸點(diǎn)的增加和減少，等等

touchstart仅仆、touchmove器赞、touchend 三個(gè)事件都會(huì)各自有事件對(duì)象。

觸摸事件對(duì)象重點(diǎn)我們看三個(gè)常見對(duì)象列表：

image.png

因?yàn)槠綍r(shí)我們都是給元素注冊(cè)觸摸事件墓拜，所以重點(diǎn)記住 targetTocuhes

1.1.3 移動(dòng)端拖動(dòng)元素

1. touchstart港柜、touchmove、touchend 可以實(shí)現(xiàn)拖動(dòng)元素
2. 但是拖動(dòng)元素需要當(dāng)前手指的坐標(biāo)值 我們可以使用 targetTouches[0] 里面的pageX 和 pageY
3. 移動(dòng)端拖動(dòng)的原理： 手指移動(dòng)中咳榜，計(jì)算出手指移動(dòng)的距離夏醉。然后用盒子原來(lái)的位置 + 手指移動(dòng)的距離
4. 手指移動(dòng)的距離： 手指滑動(dòng)中的位置 減去 手指剛開始觸摸的位置

拖動(dòng)元素三步曲：

（1） 觸摸元素 touchstart： 獲取手指初始坐標(biāo)，同時(shí)獲得盒子原來(lái)的位置

（2） 移動(dòng)手指 touchmove： 計(jì)算手指的滑動(dòng)距離涌韩，并且移動(dòng)盒子

（3） 離開手指 touchend:

注意： 手指移動(dòng)也會(huì)觸發(fā)滾動(dòng)屏幕所以這里要阻止默認(rèn)的屏幕滾動(dòng) e.preventDefault();

1.2. 移動(dòng)端常見特效

1.2.1 案例: 移動(dòng)輪播圖

移動(dòng)端輪播圖功能和基本PC端一致畔柔。

1. 可以自動(dòng)播放圖片
2. 手指可以拖動(dòng)播放輪播圖

1.2.2. 案例分析:

1. 自動(dòng)播放功能
2. 開啟定時(shí)器
3. 移動(dòng)端移動(dòng)，可以使用translate 移動(dòng)

4. 想要圖片優(yōu)雅的移動(dòng)臣樱，請(qǐng)?zhí)砑舆^(guò)渡效果

   
   
   image.png
5. 自動(dòng)播放功能-無(wú)縫滾動(dòng)
6. 注意靶擦，我們判斷條件是要等到圖片滾動(dòng)完畢再去判斷，就是過(guò)渡完成后判斷
7. 此時(shí)需要添加檢測(cè)過(guò)渡完成事件 transitionend
8. 判斷條件：如果索引號(hào)等于 3 說(shuō)明走到最后一張圖片雇毫，此時(shí) 索引號(hào)要復(fù)原為 0
9. 此時(shí)圖片玄捕，去掉過(guò)渡效果，然后移動(dòng)
10. 如果索引號(hào)小于0棚放， 說(shuō)明是倒著走枚粘， 索引號(hào)等于2

11. 此時(shí)圖片，去掉過(guò)渡效果席吴，然后移動(dòng)

    
    
    image.png

1.2.3 classList 屬性

classList屬性是HTML5新增的一個(gè)屬性赌结，返回元素的類名捞蛋。但是ie10以上版本支持。

該屬性用于在元素中添加柬姚，移除及切換 CSS 類拟杉。有以下方法

添加類：
element.classList.add（’類名’）；

focus.classList.add('current');

移除類：
element.classList.remove（’類名’）;

focus.classList.remove('current');

切換類：
element.classList.toggle（’類名’）;

focus.classList.toggle('current');

1.2.4. 案例分析

1. 小圓點(diǎn)跟隨變化效果
2. 把ol里面li帶有current類名的選出來(lái)去掉類名 remove
3. 讓當(dāng)前索引號(hào)的小li 加上 current add
4. 但是量承，是等著過(guò)渡結(jié)束之后變化搬设，所以這個(gè)寫到 transitionend 事件里面

1. 手指滑動(dòng)輪播圖
2. 本質(zhì)就是ul跟隨手指移動(dòng)，簡(jiǎn)單說(shuō)就是移動(dòng)端拖動(dòng)元素
3. 觸摸元素touchstart： 獲取手指初始坐標(biāo)
4. 移動(dòng)手指touchmove： 計(jì)算手指的滑動(dòng)距離撕捍，并且移動(dòng)盒子
5. 離開手指touchend: 根據(jù)滑動(dòng)的距離分不同的情況
6. 如果移動(dòng)距離小于某個(gè)像素 就回彈原來(lái)位置
7. 如果移動(dòng)距離大于某個(gè)像素就上一張下一張滑動(dòng)拿穴。
8. 滑動(dòng)也分為左滑動(dòng)和右滑動(dòng)判斷的標(biāo)準(zhǔn)是 移動(dòng)距離正負(fù) 如果是負(fù)值就是左滑 反之右滑
9. 如果是左滑就播放下一張 （index++）

10. 如果是右滑就播放上一張 (index--)

    
    
    image.png
    
    
    image.png

1.4. click 延時(shí)解決方案

移動(dòng)端 click 事件會(huì)有 300ms 的延時(shí)，原因是移動(dòng)端屏幕雙擊會(huì)縮放(double tap to zoom) 頁(yè)面忧风。

解決方案：

1. 禁用縮放默色。 瀏覽器禁用默認(rèn)的雙擊縮放行為并且去掉300ms 的點(diǎn)擊延遲。

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

2.利用touch事件自己封裝這個(gè)事件解決300ms 延遲狮腿。

原理就是：

1. 當(dāng)我們手指觸摸屏幕腿宰，記錄當(dāng)前觸摸時(shí)間
2. 當(dāng)我們手指離開屏幕， 用離開的時(shí)間減去觸摸的時(shí)間
3. 如果時(shí)間小于150ms缘厢，并且沒(méi)有滑動(dòng)過(guò)屏幕吃度， 那么我們就定義為點(diǎn)擊
   代碼如下:

//封裝tap，解決click 300ms 延時(shí)
function tap (obj, callback) {
        var isMove = false;
        var startTime = 0; // 記錄觸摸時(shí)候的時(shí)間變量
        obj.addEventListener('touchstart', function (e) {
            startTime = Date.now(); // 記錄觸摸時(shí)間
        });
        obj.addEventListener('touchmove', function (e) {
            isMove = true;  // 看看是否有滑動(dòng)贴硫，有滑動(dòng)算拖拽椿每，不算點(diǎn)擊
        });
        obj.addEventListener('touchend', function (e) {
            if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指觸摸和離開時(shí)間小于150ms 算點(diǎn)擊
                callback && callback(); // 執(zhí)行回調(diào)函數(shù)
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
}
//調(diào)用  
  tap(div, function(){   // 執(zhí)行代碼  });

3 使用插件。fastclick 插件解決300ms 延遲英遭。

image.png

1.5. 移動(dòng)端常用開發(fā)插件

1.5.1. 什么是插件

移動(dòng)端要求的是快速開發(fā)间护，所以我們經(jīng)常會(huì)借助于一些插件來(lái)幫我完成操作，那么什么是插件呢挖诸？

JS 插件是 js 文件兑牡，它遵循一定規(guī)范編寫，方便程序展示效果税灌，擁有特定功能且方便調(diào)用。如輪播圖和瀑布流插件亿虽。

特點(diǎn)：它一般是為了解決某個(gè)問(wèn)題而專門存在菱涤，其功能單一，并且比較小洛勉。

我們以前寫的animate.js 也算一個(gè)最簡(jiǎn)單的插件

fastclick 插件解決 300ms 延遲粘秆。 使用延時(shí)

GitHub官網(wǎng)地址： https://github.com/ftlabs/fastclick

1.5.2. 插件的使用

1. 引入 js 插件文件。

2. 按照規(guī)定語(yǔ)法使用收毫。

3. fastclick 插件解決 300ms 延遲攻走。 使用延時(shí)

4. GitHub官網(wǎng)地址： https://github.com/ftlabs/fastclick

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

1.5.3. Swiper 插件的使用

中文官網(wǎng)地址： https://www.swiper.com.cn/

1. 引入插件相關(guān)文件殷勘。

2. 按照規(guī)定語(yǔ)法使用

1.5.4. 其他移動(dòng)端常見插件

lsuperslide： http://www.superslide2.com/

l iscroll： https://github.com/cubiq/iscroll

1.5.5. 插件的使用總結(jié)

1.確認(rèn)插件實(shí)現(xiàn)的功能

2.去官網(wǎng)查看使用說(shuō)明

3.下載插件

4.打開demo實(shí)例文件，查看需要引入的相關(guān)文件昔搂，并且引入

5.復(fù)制demo實(shí)例文件中的結(jié)構(gòu)html玲销，樣式css以及js代碼

1.5.6. 移動(dòng)端視頻插件 zy.media.js

H5 給我們提供了 video 標(biāo)簽，但是瀏覽器的支持情況不同摘符。

不同的視頻格式文件贤斜，我們可以通過(guò)source解決。

但是外觀樣式逛裤，還有暫停瘩绒，播放，全屏等功能我們只能自己寫代碼解決带族。

這個(gè)時(shí)候我們可以使用插件方式來(lái)制作锁荔。

我們可以通過(guò) JS 修改元素的大小、顏色蝙砌、位置等樣式阳堕。

1.6. 移動(dòng)端常用開發(fā)框架

1.6.1. 移動(dòng)端視頻插件 zy.media.js

框架，顧名思義就是一套架構(gòu)拍霜，它會(huì)基于自身的特點(diǎn)向用戶提供一套較為完整的解決方案嘱丢。框架的控制權(quán)在框架本身祠饺，使用者要按照框架所規(guī)定的某種規(guī)范進(jìn)行開發(fā)越驻。

插件一般是為了解決某個(gè)問(wèn)題而專門存在，其功能單一道偷，并且比較小缀旁。

前端常用的框架有 Bootstrap、Vue勺鸦、Angular并巍、React 等。既能開發(fā)PC端换途，也能開發(fā)移動(dòng)端

前端常用的移動(dòng)端插件有 swiper懊渡、superslide、iscroll等军拟。

框架： 大而全剃执，一整套解決方案

插件： 小而專一，某個(gè)功能的解決方案

1.6.2. Bootstrap

Bootstrap 是一個(gè)簡(jiǎn)潔懈息、直觀肾档、強(qiáng)悍的前端開發(fā)框架，它讓 web 開發(fā)更迅速、簡(jiǎn)單怒见。

它能開發(fā)PC端俗慈，也能開發(fā)移動(dòng)端

Bootstrap JS插件使用步驟：

1.引入相關(guān)js 文件

2.復(fù)制HTML 結(jié)構(gòu)

3.修改對(duì)應(yīng)樣式

4.修改相應(yīng)JS 參數(shù)

1.7. 本地存儲(chǔ)

隨著互聯(lián)網(wǎng)的快速發(fā)展，基于網(wǎng)頁(yè)的應(yīng)用越來(lái)越普遍遣耍，同時(shí)也變的越來(lái)越復(fù)雜闺阱，為了滿足各種各樣的需求，會(huì)經(jīng)常性在本地存儲(chǔ)大量的數(shù)據(jù)配阵，HTML5規(guī)范提出了相關(guān)解決方案馏颂。

1.7.1.本地存儲(chǔ)特性

1、數(shù)據(jù)存儲(chǔ)在用戶瀏覽器中

2棋傍、設(shè)置救拉、讀取方便、甚至頁(yè)面刷新不丟失數(shù)據(jù)

3瘫拣、容量較大亿絮，sessionStorage約5M、localStorage約20M

4麸拄、只能存儲(chǔ)字符串派昧，可以將對(duì)象JSON.stringify() 編碼后存儲(chǔ)

1.7.2.window.sessionStorage

1、生命周期為關(guān)閉瀏覽器窗口

2拢切、在同一個(gè)窗口(頁(yè)面)下數(shù)據(jù)可以共享

3蒂萎、以鍵值對(duì)的形式存儲(chǔ)使用

存儲(chǔ)數(shù)據(jù)：

sessionStorage.setItem(key, value)

獲取數(shù)據(jù)：

sessionStorage.getItem(key)

刪除數(shù)據(jù)：

sessionStorage.removeItem(key)

清空數(shù)據(jù)：(所有都清除掉)

sessionStorage.clear()

1.7.3.window.localStorage

1、聲明周期永久生效淮椰，除非手動(dòng)刪除 否則關(guān)閉頁(yè)面也會(huì)存在

2五慈、可以多窗口（頁(yè)面）共享（同一瀏覽器可以共享）

3. 以鍵值對(duì)的形式存儲(chǔ)使用

存儲(chǔ)數(shù)據(jù)：

localStorage.setItem(key, value)

獲取數(shù)據(jù)：

localStorage.removeItem(key)

清空數(shù)據(jù)：(所有都清除掉)

localStorage.clear()

1.7.4.案例：記住用戶名

如果勾選記住用戶名， 下次用戶打開瀏覽器主穗，就在文本框里面自動(dòng)顯示上次登錄的用戶名

案例分析

1. 把數(shù)據(jù)存起來(lái)泻拦，用到本地存儲(chǔ)
2. 關(guān)閉頁(yè)面，也可以顯示用戶名忽媒，所以用到localStorage
3. 打開頁(yè)面争拐，先判斷是否有這個(gè)用戶名，如果有晦雨，就在表單里面顯示用戶名架曹，并且勾選復(fù)選框
4. 當(dāng)復(fù)選框發(fā)生改變的時(shí)候change事件

5. 如果勾選，就存儲(chǔ)闹瞧，否則就移除

   
   
   image.png