目錄
學習目標
- 觸屏事件
- 移動端常見特效
- 移動端常用開發插件
- 移動端常用開發框架
1. 觸屏事件
1.1 觸屏事件概述
-
移動端瀏覽器兼容性好我們不用考慮以前JS的兼容性問題，可以放心的使用原生JS書寫效果，但是移動端也有自己獨特的地方，比如說觸屏事件touch（也稱觸摸事件），Android 和 IOS 都有
-
touch對象代表一個觸摸點，觸摸點可能是一根手指，也可能是一根觸摸筆。觸摸事件可響應用戶手指（或觸控筆）對屏幕或者觸控板操作
-
常見的觸屏事件
| 觸屏touch事件 | 說明 |
|---|---|
| touchstart | 手指觸摸到一個DOM元素時觸發 |
| touchmove | 手指在一個DOM元素上滑動時觸發 |
| touched | 手指從一個DOM元素上移開時觸發 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="width: 100px;
height: 100px;
background-color: aqua;"></div>
<script>
var div = document.querySelector('div');
div.addEventListener('touchstart', function() {
console.log("我摸了你");
})
div.addEventListener('touchmove', function() {
console.log("我持續摸你");
})
div.addEventListener('touchend', function() {
console.log("摸完就走");
})
</script>
</body>
</html>
1.2 觸摸事件對象（TouchEvent）
TouchEvent 是一類描述手指在觸摸平面（觸摸屏，觸摸板等）的狀態變化的事件，這類事件用於描述一個或多個觸點，使開發者可以檢測觸點的增加和減少，等等
touchstart，touchmove，touchend三個事件都會各自有事件對象
觸摸事件對象重點我們看三個常見對象列表
| 觸摸列表 | 說明 |
|---|---|
| touches | 正在觸摸屏幕的所有手指的一個列表 |
| targetTouches | 正在觸摸當前 DOM 元素上的手指的一個列表 ，例：targetTouches[0] |
| changedTouches | 手指狀態發生改變的列表，從無到有，從有到無 |
1.3 移動端拖動元素
- touchstart、touchmove、touchend可以實現拖動元素
- 拖動元素需要當前手指的座標值 我們可以用 targetTouches[0]裏面的 pageX 和 pageY
- 移動端拖動原理：手指移動中，計算出手指移動的距離，然後加上盒子原來的位置 + 手指移動的距離
- 手指移動的距離：手指滑動中的位置 減去 手指剛開始觸摸的位置。
注：拖動三部曲
- 觸摸元素 touchstart：獲取手指的初始座標，同時獲得盒子原來的位置
- 移動手指 touchmove：計算手指滑動距離，並且移動盒子
- 離開手指touchend：
注意：手指移動也會觸發滑動屏幕所以這裏要阻止默認的屏幕滾動e.preventDefault
<body>
<div style="
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;"></div>
<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';
})
</script>
</body>
輪播圖無縫滾動：
- 第一張放最後，最後一張放最前面
- 監聽過渡效果是否完成，若完成直接跳變到第 0 張圖
- 如果 <0 拖動效果 那麼跳變到最後一個
transitionend 事件：
element.addEventListener('transitionend',function() {
if(index == 最後一張的引索值){
index = 0；
ul.style.transition = 'none';/* 去掉過渡效果 */
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex +'px)';
}else if(index < 0){
index = 2;
ul.style.transition = 'none';/* 去掉過渡效果 */
var translatex = -index * w;
ul.style.transform = 'translateX(' + translatex +'px)';
}
})
3.classList屬性
以僞數組的形式返回所有的類，可以增刪改，比 classname 好
語法規範：
div.classList.add('three'); /* 追加 */
div.classList.remove('one'); /* 刪除類名 */
div.classList.toggle('one'); /* 切換類，如果有此類，則刪除，若無此類則添加 */
4. 返回頂端
-
滾動
window.pageYoffset >= 某值 則顯示否則隱藏 -
點擊
window.scroll(0,0);
5. click延時解決方案
移動端 click 事件會有 300ms 的延時，原因是移動端屏幕雙擊會縮放（double tap to zoom）頁面。
解決方案：
- 禁用縮放，瀏覽器禁用默認的雙擊縮放行爲並且去掉 300ms 的點擊延遲
<meta name="viewport" content="user-scalable=no"> - 利用touch事件自己封裝這個事件解決 300ms 延時。
原理：- 當我們手指觸摸屏幕，記錄當前觸摸時間
- 當我們手指離開屏幕，用離開時間減去觸摸的時間
- 如果時間小於 150ms， 並且沒有滑動過屏幕，那麼我們就定義爲點擊
<body>
<div style="
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;" class="one two"></div>
<script>
var div = document.querySelector('div');
console.log(div);
// 封裝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() {
isMove = true; // 看看是否有滑動，有滑動算拖拽，不算點擊
})
obj.addEventListener('touchend', function(e) {
if (!isMove && (Date.now() - startTime) < 150) { //如果手指觸摸覺離開時間小於 150ms 算點擊
callback && callback(); //執行回調函數
}
isMove = false; // 取反 重置
startTime = 0;
})
}
// 調用
tap(div, function() { // 執行代碼
console.log(0);
})
</script>
</body>
- fastclick.js
<body>
<div style="
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;" class="one two"></div>
<script src="./fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false)
}
</script>
</body>
6. 移動端常用插件
- swiper
- superslider
- iscroll
- zy.media.js
7. 移動端常用開發框架
框架，顧名思義就是一套架構，他會基於自身的特點向用戶提供一套較爲完整的解決方案，框架的控制權在框架本身，使用者要按照框架所規定的某種規範進行開發。
插件一般是爲了解決某個問題而專門存在，其功能單一，比較小
前端常用的框架有 Bootstrap、Vue、Angular、React等，既能開發PC端，也能開發移動端
框架：大而全，一整套解決方案
插件：小而專，某個功能