202 移动端常用开发插件:fastclick ,Swiper ,lsuperslide,iscroll,zy.media.js

荒凉一梦 提交于 2020-01-15 13:15:04

1.5.1 什么是插件

移动端要求的是快速开发,所以我们经常会借助于一些插件来帮我完成操作,那么什么是插件呢?

JS 插件:是 js 文件,它遵循一定规范编写,方便程序展示效果,拥有特定功能且方便调用。如轮播图和瀑布流插件。

特点:它一般是为了解决某个问题而专门存在,其功能单一,并且比较小。

我们以前写的animate.js 也算一个最简单的插件

fastclick 插件解决 300ms 延迟。

GitHub官网地址: https://github.com/ftlabs/fastclick


1.5.2 插件的使用

  1. 引入 js 插件文件。

  2. 按照规定语法使用。

  3. fastclick 插件解决 300ms 延迟。

  4. GitHub官网地址: https://github.com/ftlabs/fastclick

    if ('addEventListener' in document) {
                document.addEventListener('DOMContentLoaded', function() {
                           FastClick.attach(document.body);
                }, false);
    }

1.5.3 Swiper 插件的使用

中文官网地址: https://www.swiper.com.cn/

  1. 引入插件相关文件。
  2. 按照规定语法使用

1.5.4 其他移动端常见插件:lsuperslide、iscroll

lsuperslide: http://www.superslide2.com/

l iscroll: https://github.com/cubiq/iscroll


1.5.5 插件的使用总结

1.确认插件实现的功能

2.去官网查看使用说明

3.下载插件

4.打开demo实例文件,查看需要引入的相关文件,并且引入

5.复制demo实例文件中的结构html,样式css以及js代码


1.5.6 移动端视频插件 zy.media.js

H5 给我们提供了 video 标签,但是浏览器的支持情况不同。

不同的视频格式文件,我们可以通过source解决。

但是外观样式,还有暂停,播放,全屏等功能我们只能自己写代码解决。

这个时候我们可以使用插件方式来制作。

我们可以通过 JS 修改元素的大小、颜色、位置等样式。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!