click延時(shí)問(wèn)題
移動(dòng)端
click事件會(huì)有300毫秒延時(shí)問(wèn)題惜姐，原因是移動(dòng)端屏幕雙擊會(huì)縮放(double tap to zoom)頁(yè)面。
- 解決方案：
- 禁用縮放析显，瀏覽器禁用默認(rèn)的雙擊縮放行為并且去掉300毫秒的點(diǎn)擊延遲
<meta name="viewport" content="user-scalable=no">
- 利用
touch事件自己封裝這個(gè)事件解決300毫秒延遲
- 原理：當(dāng)我們手指觸摸屏幕蛹找，記錄當(dāng)前觸摸時(shí)間，當(dāng)我們手指離開(kāi)屏幕卸亮，用離開(kāi)時(shí)間減去觸摸的時(shí)間忽妒，如果小于120毫秒，并且沒(méi)有滑動(dòng)屏幕兼贸，那我們就定義為點(diǎn)擊(代碼如下)
// 封裝tap段直，解決300ms延時(shí)
function tap(obj, callback) {
var isMove = false;
var startTime = 0; // 記錄觸摸時(shí)候的時(shí)間變量
obj.addEventListener('touchstart', function (e) {
startTime = Data.now(); // 記錄觸摸時(shí)間
});
obj.addEventListener('touchmove', function (e) {
isMove = true; // 看看是否有滑動(dòng)，有滑動(dòng)算拖拽溶诞，不算點(diǎn)擊
});
obj.addEventListener('touchend', function (e) {
if (!isMove && (Data.now() - startTime) < 150) { // 如果手指觸摸時(shí)間小于150毫秒算點(diǎn)擊
callback && callback(); // 執(zhí)行回調(diào)函數(shù)
}
isMove = false; // 取反 重置
startTime = 0;
});
}
// 調(diào)用函數(shù)
tap(div, function() {
// 執(zhí)行代碼
});
- 使用插件鸯檬。
fastclick插件解決300ms延遲
- 移動(dòng)端要求的是快速開(kāi)發(fā)，所以我們經(jīng)常借用一些插件來(lái)幫助我們完成操作(JS插件是JS文件螺垢，它遵循一定規(guī)范編寫(xiě)喧务，方便程序展示效果，擁有特定功能且方便調(diào)用枉圃，如輪播圖和瀑布流插件)
- 插件的特點(diǎn)：它是為解決某個(gè)問(wèn)題而專門(mén)存在功茴，其功能單一，并且比較小
移動(dòng)端常用開(kāi)發(fā)插件
插件一般是為了解決某個(gè)問(wèn)題而專門(mén)存在孽亲，其功能單一坎穿，并且比較小。
-
Swiper插件的使用(中文官網(wǎng)地址：https://www.swiper.com.cn/)
- 引入插件相關(guān)文件
- 按照規(guī)定語(yǔ)法使用
-
superslide:http://www.superslide2.com/ -
iscroll:https://github.com/cubiq/iscroll
插件使用總結(jié)
- 確認(rèn)插件實(shí)現(xiàn)的功能
- 去官網(wǎng)查看使用說(shuō)明
- 下載插件
- 打開(kāi)demo實(shí)例文件返劲，查看需要引入的相關(guān)文件
- 復(fù)制demo實(shí)例文件中的結(jié)構(gòu)html玲昧、樣式css以及js代碼
============
練習(xí)：移動(dòng)端視頻插件
zy.media.js
- H5給我們提供了
video標(biāo)簽，但是瀏覽器的支持情況不同- 不同的視頻格式文件篮绿，我們可以通過(guò)
source解決- 但是外觀樣式孵延，還有暫停、播放亲配、全屏等功能我們只能自己寫(xiě)代碼解決尘应，這個(gè)時(shí)候我們可以用插件來(lái)操作
<!-- 想玩自己玩去吧惶凝，在這我就不寫(xiě)了，有種自己坑自己的感覺(jué) -->
<video src="move.mp4" controls></video>
移動(dòng)端常用的開(kāi)發(fā)框架
框架概述：框架犬钢，顧名思義就是一套架構(gòu)梨睁，它會(huì)基于自身的特點(diǎn)向用戶提供一套較為完整的解決方案∧榷框架的控制權(quán)在框架本身坡贺，使用者要按照框架所規(guī)定的某種規(guī)范進(jìn)行開(kāi)發(fā)
- 常用的前端框架有Bootstrap、Vue箱舞、Angular遍坟、React等，既能開(kāi)發(fā)PC端晴股，也能開(kāi)發(fā)移動(dòng)端
- 框架：大而全愿伴，一整套解決方案
- 插件：小而專一，某個(gè)功能的解決方案
Bootstrap
Bootstrap是一個(gè)簡(jiǎn)潔电湘、直觀隔节、強(qiáng)悍的前端開(kāi)發(fā)框架，它讓web開(kāi)發(fā)更迅捷寂呛、簡(jiǎn)單怎诫。它能開(kāi)發(fā)PC端，也能開(kāi)發(fā)移動(dòng)端
- Bootstrap JS插件使用步驟
- 引入相關(guān)JS文件
- 復(fù)制HTML結(jié)構(gòu)
- 修改對(duì)應(yīng)樣式
- 修改相應(yīng)JS參數(shù)
