JavaScript十二 - 移動端觸摸事件

15.1 移動端常見特效

15.1.1 案例講解-攜程移動端輪播圖

1.引入相關js 文件
2.複製HTML 結構
3.修改對應樣式
4.修改相應JS 參數

15.2 classList屬性

15.2.1 概述

classList屬性是HTML5新增的一個屬性,返回元素的類名。但是ie10以上版本支持。

該屬性用於在元素中添加,移除及切換 CSS 類。有以下方法

添加類:

element.classList.add(’類名’);

focus.classList.add('current');

移除類:

element.classList.remove(’類名’);

focus.classList.remove('current');

切換類:

element.classList.toggle(’類名’);

focus.classList.toggle('current');

注意:以上方法裏面,所有類名都不帶點

15.2.2 案例講解-攜程移動端輪播圖改進

  1. 手指滑動輪播圖
  2. 本質就是ul跟隨手指移動,簡單說就是移動端拖動元素
  3. 觸摸元素touchstart: 獲取手指初始座標
  4. 移動手指touchmove: 計算手指的滑動距離,並且移動盒子
  5. 離開手指touchend: 根據滑動的距離分不同的情況
  6. 如果移動距離小於某個像素 就回彈原來位置
  7. 如果移動距離大於某個像素就上一張下一張滑動。
  8. 滑動也分爲左滑動和右滑動判斷的標準是 移動距離正負 如果是負值就是左滑 反之右滑
  9. 如果是左滑就播放下一張 (index++)
  10. 如果是右滑就播放上一張 (index--)

15.2.3 案例講解-返回頂部

當頁面滾動某個地方,就顯示,否則隱藏

點擊可以返回頂部

15.3 click延遲解決方案

15.3.1 產生原因

移動端 click 事件會有 300ms 的延時,原因是移動端屏幕雙擊會縮放(double tap to zoom) 頁面。

解決方案:

  1. 禁用縮放。 瀏覽器禁用默認的雙擊縮放行爲並且去掉300ms 的點擊延遲。
<meta name="viewport" content="user-scalable=no">

2.利用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(){   // 執行代碼  });

  1. 使用插件。fastclick 插件解決300ms 延遲。

15.3.2 禁用縮放

禁用縮放。 瀏覽器禁用默認的雙擊縮放行爲並且去掉300ms 的點擊延遲。

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

15.3.3 利用touch事件自己封裝

  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(){   // 執行代碼  });

15.3.4 fastclick 插件

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

<script type='application/javascript' src='/path/to/fastclick.js'></script>
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}
</script>

15.4 移動端常用開發插件

15.4.1 什麼是插件

移動端要求的是快速開發,所以我們經常會藉助於一些插件來幫我完成操作,那麼什麼是插件呢?

JS 插件是 js 文件,它遵循一定規範編寫,方便程序展示效果,擁有特定功能且方便調用。如輪播圖和瀑布流插件。

特點:它一般是爲了解決某個問題而專門存在,其功能單一,並且比較小。

我們以前寫的animate.js 也算一個最簡單的插件

fastclick 插件解決 300ms 延遲。 使用延時

GitHub官網地址: https://github.com/ftlabs/fastclick

15.4.2 Swiper 插件的使用

中文官網地址: https://www.swiper.com.cn/

  1. 引入插件相關文件。
  2. 按照規定語法使用

15.4.3 視頻插件zy.media.js

框架,顧名思義就是一套架構,它會基於自身的特點向用戶提供一套較爲完整的解決方案。框架的控制權在框架本身,使用者要按照框架所規定的某種規範進行開發。

插件一般是爲了解決某個問題而專門存在,其功能單一,並且比較小。
前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能開發PC端,也能開發移動端
前端常用的移動端插件有 swiper、superslide、iscroll等。

框架: 大而全,一整套解決方案
插件: 小而專一,某個功能的解決方案

15.4.4 其他移動端常見插件

lsuperslide: http://www.superslide2.com/
l iscroll: https://github.com/cubiq/iscroll

15.5 移動端常用開發框架

15.5.1 BootStrap

Bootstrap 是一個簡潔、直觀、強悍的前端開發框架,它讓 web 開發更迅速、簡單。
它能開發PC端,也能開發移動端
Bootstrap JS插件使用步驟:

1.引入相關js 文件
2.複製HTML 結構
3.修改對應樣式
4.修改相應JS 參數

15.5.2案例講解-阿里百秀輪播圖

1.引入相關js 文件
2.複製HTML 結構
3.修改對應樣式
4.修改相應JS 參數

15.6本地存儲

15.6.1本地存儲特性

隨着互聯網的快速發展,基於網頁的應用越來越普遍,同時也變的越來越複雜,爲了滿足各種各樣的需求,會經常性在本地存儲大量的數據,HTML5規範提出了相關解決方案。

1、數據存儲在用戶瀏覽器中
2、設置、讀取方便、甚至頁面刷新不丟失數據
3、容量較大,sessionStorage約5M、localStorage約20M
4、只能存儲字符串,可以將對象JSON.stringify() 編碼後存儲

15.6.2 window.sessionStorage

1、生命週期爲關閉瀏覽器窗口
2、在同一個窗口(頁面)下數據可以共享
3、以鍵值對的形式存儲使用

存儲數據:

sessionStorage.setItem(key, value)

獲取數據:

sessionStorage.getItem(key)

刪除數據:

sessionStorage.removeItem(key)

清空數據:(所有都清除掉)

sessionStorage.clear()

15.6.3 window.localStorage

1、聲明週期永久生效,除非手動刪除 否則關閉頁面也會存在

2、可以多窗口(頁面)共享(同一瀏覽器可以共享)

  1. 以鍵值對的形式存儲使用

存儲數據:

localStorage.setItem(key, value)

獲取數據:

localStorage.getItem(key)

刪除數據:

localStorage.removeItem(key)

清空數據:(所有都清除掉)

localStorage.clear()

15.6.4 案例講解-記住用戶名

如果勾選記住用戶名, 下次用戶打開瀏覽器,就在文本框裏面自動顯示上次登錄的用戶名

案例分析

  1. 把數據存起來,用到本地存儲

  2. 關閉頁面,也可以顯示用戶名,所以用到localStorage

  3. 打開頁面,先判斷是否有這個用戶名,如果有,就在表單裏面顯示用戶名,並且勾選複選框

  4. 當複選框發生改變的時候change事件

  5. 如果勾選,就存儲,否則就移除

<input type="text" id= "username" />
<input type= "checkbox" name="" id="remember">  
<script>
var username = document.querySelector( '#username');
var remember = document.querySelector('#remember');
if (localStorage.getItem('username')){
    username.value a localStorage.getItem( ' username ' );
    remember .checked = true;
}
remember. addEventListener('change', function(){
        if (this.checked){
            localStorage.setItem( 'username ' , username.value)
        }else{
           localStorage.removeItem( 'username');
        }
}
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章