click延时问题
移动端
click事件会有300毫秒延时问题，原因是移动端屏幕双击会缩放(double tap to zoom)页面。
- 解决方案：
- 禁用缩放，浏览器禁用默认的双击缩放行为并且去掉300毫秒的点击延迟
<meta name="viewport" content="user-scalable=no">
- 利用
touch事件自己封装这个事件解决300毫秒延迟
- 原理：当我们手指触摸屏幕，记录当前触摸时间，当我们手指离开屏幕，用离开时间减去触摸的时间，如果小于120毫秒，并且没有滑动屏幕，那我们就定义为点击(代码如下)
// 封装tap，解决300ms延时
function tap(obj, callback) {
var isMove = false;
var startTime = 0; // 记录触摸时候的时间变量
obj.addEventListener('touchstart', function (e) {
startTime = Data.now(); // 记录触摸时间
});
obj.addEventListener('touchmove', function (e) {
isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
});
obj.addEventListener('touchend', function (e) {
if (!isMove && (Data.now() - startTime) < 150) { // 如果手指触摸时间小于150毫秒算点击
callback && callback(); // 执行回调函数
}
isMove = false; // 取反 重置
startTime = 0;
});
}
// 调用函数
tap(div, function() {
// 执行代码
});
- 使用插件。
fastclick插件解决300ms延迟
- 移动端要求的是快速开发，所以我们经常借用一些插件来帮助我们完成操作(JS插件是JS文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用，如轮播图和瀑布流插件)
- 插件的特点：它是为解决某个问题而专门存在，其功能单一，并且比较小
移动端常用开发插件
插件一般是为了解决某个问题而专门存在，其功能单一，并且比较小。
-
Swiper插件的使用(中文官网地址：https://www.swiper.com.cn/)
- 引入插件相关文件
- 按照规定语法使用
-
superslide:http://www.superslide2.com/ -
iscroll:https://github.com/cubiq/iscroll
插件使用总结
- 确认插件实现的功能
- 去官网查看使用说明
- 下载插件
- 打开demo实例文件，查看需要引入的相关文件
- 复制demo实例文件中的结构html、样式css以及js代码
============
练习：移动端视频插件
zy.media.js
- H5给我们提供了
video标签，但是浏览器的支持情况不同- 不同的视频格式文件，我们可以通过
source解决- 但是外观样式，还有暂停、播放、全屏等功能我们只能自己写代码解决，这个时候我们可以用插件来操作
<!-- 想玩自己玩去吧，在这我就不写了，有种自己坑自己的感觉 -->
<video src="move.mp4" controls></video>
移动端常用的开发框架
框架概述：框架，顾名思义就是一套架构，它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发
- 常用的前端框架有Bootstrap、Vue、Angular、React等，既能开发PC端，也能开发移动端
- 框架：大而全，一整套解决方案
- 插件：小而专一，某个功能的解决方案
Bootstrap
Bootstrap是一个简洁、直观、强悍的前端开发框架，它让web开发更迅捷、简单。它能开发PC端，也能开发移动端
- Bootstrap JS插件使用步骤
- 引入相关JS文件
- 复制HTML结构
- 修改对应样式
- 修改相应JS参数
