Zepto、Swiper等JavaScript常用类库

最新推荐文章于 2024-04-23 10:09:29 发布

陈Wenwenwu

最新推荐文章于 2024-04-23 10:09:29 发布

阅读量608

点赞数

分类专栏： Javascript框架文章标签： javascript html5

本文链接：https://blog.csdn.net/Vinc_chen/article/details/111340345

版权

Javascript框架专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Zeptop

概述

Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库，和jQuery类似。
jQuery更多是在PC端被应用，Zepto更多是在移动端被应用；Zepto 体积更小
Zepto专门用于移动端的轻量级的jQuery

官方网址:

英文版
 中文版

特点

Zepto采用了模块化的开发, 将不同的功能放到了不同的模块中,在使用的过程中按需导入。

选择器

要实现高级选择器需引入selector，实验性的支持 jQuery CSS 表达式实用功能，比如 $('div:first')和 `el.is(’:visible’)。

事件

要想监听事件，需引入event，通过on()& off()处理事件。

动画

Zepto通过CSS3来实现动画

需要实现动画，需引入fx，执行The animate()方法。

需要以动画形式的 show, hide, toggle, 和 fade*()方法，引入fx。

touch

企业开发中如果需要在移动端监听点击事件, 一般不会使用click来监听，而会使用tap事件。 tap事件是Zepto自己封装的一个事件, 解决了原生click事件100~300毫秒的延迟问题。

tap

// 务必引入 touch 模块，方可使用 tap
$('button').tap(function () {
    console.log('clcked button')
})

touch事件传递参数对象

touches: 当前屏幕上所有手指的列表
targetTouches: 保存了元素上所有的手指里列表
changedTouches: 当前屏幕上刚刚接触的手指或者离开的手指

移动端"点透问题"

当一个元素放覆盖了另一个元素，覆盖的元素监听touch事件,而下面的元素监听click事件，并且touch事件触发后覆盖的元素就消失了, 那么就会出现点透问题。

解决方案是阻止事件扩散：

在touch事件中添加event.preverDefault() 来阻止事件扩散
使用Zepto新版本。
使用Fastclick插件。

swipe

监听滑动事件

四个方向滑动

$("div").swipeLeft(function () {
    // console.log("向左边轻扫");
});
$("div").swipeRight(function () {
    // console.log("向右边轻扫");
 
});
$("div").swipeUp(function () {
    // console.log("向上边轻扫");
});
$("div").swipeDown(function () {
    // console.log("向下边轻扫");
});

为 Zepto 添加插件方法

;(function($){
  $.extend($.fn, {
    foo: function(){
      // `this` refers to the current Zepto collection.
      // When possible, return the Zepto collection to allow chaining.
      return this.html('bar')
    }
  })
})(Zepto)

IScroll

iScroll是一个高性能，资源占用少，无依赖，多平台的javascript滚动插件。iScroll不仅仅是滚动。在你的项目中包含仅仅4kb大小的iScroll，能让你的项目便拥有滚动，缩放，平移，无限滚动，视差滚动，旋转功能。

IScroll 基本用法

按照iScroll的规定搭建HTML结构

<!-- 最佳结构为 -->
<div>
 	<ul>
    <li>...</li>
   <!-- ... -->   
    <li>...</li>
  </ul>
</div>

文件导入iScroll模块

创建iScroll对象, 告诉它谁需要滚动

let someScroll = new IScroll('selector');	// 给选择器 selector 指定元素添加基本的 IScroll 功能

进阶用法

传入第二个参数对象，对象中写入属性-值对，可自定功能。

var myScroll = new IScroll('selector', {
    scrollbars: true,		// 添加滚动条
  	snap: true，				 // 按照页面容器的大小自动分割滚动条
});

事件
- beforeScrollStart，在用户触摸屏幕但还没有开始滚动时触发。
- scrollCancel，滚动初始化完成，但没有执行。
- scrollStart，开始滚动
- scroll，内容滚动时触发，只有在scroll-probe.js版本中有效，请参考onScroll event。
- scrollEnd，停止滚动时触发。
- flick，用户打开左/右。
- zoomStart，开始缩放。
- zoomEnd，缩放结束。
```
// 使用on(type, fn)方法注册事件。
myScroll = new IScroll('selector');
myScroll.on('scrollEnd', doSomething);	// 每次滚动停止时执行 doSomething 方法
```

Swiper

Swiper是纯javascript打造的滑动特效插件，面向PC、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

Swiper首页

基本用法

引入swiper对应的css和js文件

首先加载插件，需要用到的文件有swiper-bundle.min.js和swiper-bundle.min.css文件，不同Swiper版本用到的文件名略有不同。可下载Swiper文件或使用CDN。
按照框架的需求搭建三层结构

Slide 1

Slide 2

Slide 3

创建一个Swiper对象, 将容器元素传递给它

var mySwiper = new Swiper ('.swiper-container', {
    direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })

进阶用法

重写（覆盖）Swiper CSS 样式的类名，可以自定义样式
初始化时传入第二对象参数，设置Swiper诸如自动滑动切换、滑动动画时长等属性值
未来企业开发中可直接使用Swiper类库实现轮播图等效果，不必写业务代码，只需要按照API文档配置需要的配置即可

Swiper animate

使用Swiper Animate需要先加载swiper.animate.min.js和animate.min.css。

初始化时隐藏元素并在需要的时刻开始动画。

//Swiper5   
  var mySwiper = new Swiper ('.swiper-container', {     
    on:{       
      init: function(){         
        swiperAnimateCache(this); 
        //隐藏动画元素          
        swiperAnimate(this); //初始化完成开始动画      
      },        
      slideChangeTransitionEnd: function(){         
        swiperAnimate(this); //每个slide切换结束时也运行当前slide动画         
        //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名       
      }      
    }   
 })

在需要运动的元素上面增加类名 ani ，和其他的类似插件相同，Swiper Animate需要指定几个参数：

swiper-animate-effect：切换效果，例如 fadeInUp
swiper-animate-duration：可选，动画持续时间（单位秒），例如 0.5s
swiper-animate-delay：可选，动画延迟时间（单位秒），例如 0.3s
```
<div class="swiper-slide">
<p class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">内容</p>
</div>
```

还可根据swiper.animate.min.css中的动画效果类名，在本地自定义实现自定义动画效果：

/*swiper.animate.min.css*/
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(-100%,0,0);
        -ms-transform: translate3d(-100%,0,0);
        transform: translate3d(-100%,0,0)
    }

    100% {
        opacity: 1;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none
    }
}
/*myAnimate.css*/
@keyframes fadeInLeft {
            0% {
                opacity: 0;
                transform: translate3d(-100%, 0, 0) scale(2);
            }

            100% {
                opacity: 1;
                transform: scale(0.5);
            }
        }

Animate.CSS

wiper-animate就是参考Animate.css演变出来的一个插件,Animate.css和swiper-animate一样都是用于快速添加动画。

Animate中文网

基本用法

引入animate.css的文件

 <link rel="stylesheet" href="animate.min.css">

给需要执行动画的元素添加类名

1.如果说想给某个元素动态添加动画样式，可以通过jQuery来实现：

$('#yourElement').addClass('animated bounceOutLeft');

2.当动画效果执行完成后还可以通过以下代码添加事件

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

3.你也可以通过 JavaScript 或 jQuery 给元素添加这些 class，比如：

$(function(){
    $('#yourElement').addClass('animated bounce');
});

4.有些动画效果最后会让元素不可见，比如淡出、向左滑动等等，可能你又需要将 class 删除，比如：

$(function(){
    $('#yourElement').addClass('animated bounce');
    setTimeout(function(){
        $('#yourElement').removeClass('bounce');
    }, 1000);
});

5.animate.css 的默认设置也许有些时候并不是我们想要的，所以你可以重新设置，比如：

#yourElement {
    animate-duration: 2s;    //动画持续时间
    animate-delay: 1s;    //动画延迟时间
    animate-iteration-count: 2;    //动画执行次数
}

注意：添加类名时一定要先添加基类**animated**。

若预定义样式不满足需求，可搜索Animate.CSS 文件内预定义的类名，后复制到本地进行自定义修改，得到需要的样式。

其他类库可供参考使用：

WOWJS

陈Wenwenwu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Zepto、Swiper等JavaScript常用类库

Zeptop概述Zepto 是一个轻量级的针对现代高级浏览器的 JavaScript库，和jQuery类似。jQuery更多是在PC端被应用，Zepto更多是在移动端被应用；Zepto 体积更小Zepto专门用于移动端的轻量级的jQuery官方网址:英文版中文版特点Zepto采用了模块化的开发, 将不同的功能放到了不同的模块中,在使用的过程中按需导入。选择器要实现高级选择器需引入selector，实验性的支持 jQuery CSS 表达式实用功能，比如 $('div:
复制链接

扫一扫