zepto与swiper的简要介绍

最新推荐文章于 2024-04-23 11:37:57 发布

yyy_wj

最新推荐文章于 2024-04-23 11:37:57 发布

阅读量438

点赞数

本文链接：https://blog.csdn.net/yyy_wj/article/details/103110569

版权

本文介绍了zepto.js，一个轻量级且与jQuery API类似的JavaScript库，适用于现代高级浏览器，尤其针对移动端。zepto.min.js是基本版本，而更完整的功能可以通过额外模块获取。接着，文章转向了swiper，详细阐述了如何在项目中使用swiper，包括加载所需文件、设置大小以及初始化Swiper的方法。

摘要由CSDN通过智能技术生成

一、zepto

1.1 zepto.js API中文版

1.2 Zepto是一个轻量级的针对现代高级浏览器的JavaScript库， 它与jquery有着类似的api。如果你会用jquery，那么你也会用zepto。

1.3 Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery 。Zepto设计的目的是有一个5-10k的通用库、下载并快速执行、有一个熟悉通用的API，所以你能把你主要的精力放到应用开发上。

1.4 需要注意的是Zepto的一些可选功能是专门针对移动端浏览器的；因为它的最初目标在移动端提供一个精简的类似jquery的js库。

1.5 下载生产版的zepto文件：zepto.min.js文件只包含一些默认功能，如果想要跟多功能的话可以另外下载，完整的zepto文件可以去GitHubxi下载。

Zepto 模块

module	default	description
zepto	✔	核心模块；包含许多方法
event	✔	通过`on()`& `off()`处理事件
ajax	✔	XMLHttpRequest 和 JSONP 实用功能
form	✔	序列化 & 提交web表单
ie	✔	增加支持桌面的Internet Explorer 10+和Windows Phone 8。
detect		提供 `$.os`和 `$.browser`消息
fx		The `animate()`方法
fx_methods		以动画形式的 `show`, `hide`, `toggle`, 和 `fade*()`方法.
assets		实验性支持从DOM中移除image元素后清理iOS的内存。
data		一个全面的 `data()`方法, 能够在内存中存储任意对象。
deferred		提供 `$.Deferred`promises API. 依赖"callbacks" 模块. 当包含这个模块时候, `$.ajax()` 支持promise接口链式的回调。
callbacks		为"deferred"模块提供 `$.Callbacks`。
selector		实验性的支持 jQuery CSS 表达式实用功能，比如 `$('div:first')`和 `el.is(':visible')`。
touch		在触摸设备上触发tap– 和 swipe– 相关事件。这适用于所有的`touch`(iOS, Android)和`pointer`事件(Windows Phone)。
gesture		在触摸设备上触发 pinch 手势事件。
stack		提供 `andSelf`& `end()`链式调用方法
ios3		String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ，以兼容 iOS 3.x.

二、swiper

2.1 swiper中文网

2.2 swiper使用方法

首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件

<!DOCTYPE html>
<html>
<head>
    ...
    <link rel="stylesheet" href="dist/css/swiper.min.css">
</head>
<body>
    ...
    <script src="dist/js/swiper.min.js"></script>
    ...
</body>
</html>

HTML内容。

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
    
    <!-- 如果需要导航按钮 -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- 如果需要滚动条 -->
    <div class="swiper-scrollbar"></div>
</div>
导航等组件可以放在container之外

你可能想要给Swiper定义一个大小，当然不要也行

.swiper-container {
    width: 600px;
    height: 300px;
}

初始化Swiper：最好是挨着</body>标签

<script>        
  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',
    },
  })        
  </script>
</body>

如果不能写在HTML内容的后面，则需要在页面加载完成后再初始化。

<script>
window.onload = function() {
  ...
}
</script>

或者这样（Jquery和Zepto）(推荐)

<script>
$(document).ready(function () {
 ...
})
</script>

yyy_wj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫