移动端插件以及框架
1、触屏事件
1.1 触屏事件
触屏对象:touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者控板的操作
- 触屏事件
触屏 touch 事件 | 说明 |
---|---|
touchstart | 手指在触摸到一个 DOM 元素时触发 |
touchmove | 手指在一个 DOM 上滑动时触发 |
touchend | 手指从一个 DOM 元素上移开时触发 |
-
触屏事件对象
TouchEvent 是一类描述手指在触摸平面的状态变化的事件,这类事件用于一个或多个触点,使开发者可以检测触点的移动、增加和减少等。
touchstart、touchmove、touchend 三个事件都会有各自有事件对象
触摸列表 | 说明 |
---|---|
touches | 正在触摸屏幕的所有手指的一个列表 |
targetTouches | 正在触摸当前 DOM 元素上的手指的一个列表 |
changedTouches | 手指状态发生了改变的列表,从无到有,从有到无变化 |
1.2 classList 类
classLIst :返回元素类名,classList 属性用于在元素中添加、移除以及切换 CSS类
- 添加类:在后面追加类名不会覆盖以前的类名
element.classLis.add('类名');
- 移除类:
element.classList.remove('类名');
- 切换类
element.classList.toggle('类名');
1.3 移动端 click 事件 300ms 延迟问题
移动端 click 事件会有 300ms 的延时,是因为移动端屏幕双击会缩放页面
- 解决方案
1、禁止缩放。浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟
<meta name="viewport" content="user-scalable">;
2、利用 touch 事件自己封装这个事件解决
解决原理:(1)当我们手指触摸屏幕,记录当前触摸时间;(2)当我们手指离开屏幕,用离开的时间减去触摸的时间;(3)如果时间小于 150ms ,并且没有滑动过屏幕,那么我们就定义为点击
// 封装 tap
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) {
callback && callback(); // 执行回调函数
}
isMove = false; // 取反,重复
startTime = 0;
});
}
// 调用
tap(div,function() { // 执行代码});
3、使用插件:fastclick 插件解决延迟(可以GitHub 官网获取插件)
2、插件
-
定义
JS 插件是 JS文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能方便调用。JS 插件一般是为了解决某个问题而专门存在,其功能单一,并且比较小
-
插件之间的依赖关系
所有插件都依赖 JQuery,所以 JQuery 必须在插件之前引入页面
- 使用
2.1 Swiper 插件
中文官方网址:https://www.swiper.com.cn/
- 引入 js 文件
先引入 swiper.js 文件,再引入我们自己的 js 文件
<script src="文件路径"></script>
- 复制 css 样式
2.2 其他常用插件
- superslide:http://www.superslide2.com/
- iscroll:https://github.com/cubig/iscroll
- 视频插件 zy.media.js
3、开发框架
框架,顾名思义就是一套架构,它会基于自身的特点向用户一套较为完整的解决方案。框架的控制权在框架本身,使用者要按照框架所规定的某种规范进行规范
1、前端常用的框架有 Bootstrap、Vue、Angular、React等,技能开发 PC 端,又能开发移动端
2、移动端常用的插件有 swiper、superslide、iscroll 等
- 使用