0
点赞
收藏
分享

微信扫一扫

Web前端开发学习笔记11--移动端插件以及框架

吃面多放酱 2022-04-23 阅读 67

移动端插件以及框架

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 等

  • 使用
举报

相关推荐

0 条评论