当前位置：首页 > 资讯 > 技术文档

移动端滑动插件Swipe教程

时间：2021-08-11 01:51 编辑：来源：阅读：
扫一扫，手机访问

摘要：移动端滑动插件Swipe教程

[b]前言[/b] 最近需要开发一个新的“微信活动平台”，手机端主页需要用到一个幻灯片。因为好一段时间没有全部手写移动端页面了，遂又重新找了一个下有没有什么好的幻灯片插件，毕竟重复造轮子没有必要啊。综合比较后发现，Swipe 这款插件还是比较不错的，所以这里特地写一篇文章以像大家推荐，并且作为记录，方便下次查看。 [b]简介[/b] Swipe 是一个轻量级的移动滑动组件，这点从文件大小不难看出。它支持 1:1 的触摸移动，阻力以及防滑。单纯从移动端来使用，应该满足基本的需求了。 [b]说明[/b] 从github下载后，可以发现，总共就8个文件，其中可能真正项目中用得到的，也基本就是1个 swipe.js 文件。 index.html 和 style.css 本身是作为演示存在的，有兴趣的可以研究一下。那么我们具体如果使用它呢？很简单，基本只要如下代码即可：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>演示</title>
  <!-- 首先引入JQuery -->
  <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  <!-- 引入核心swipe.js文件 -->
  <script src="swipe.js"></script>
  <!-- 幻灯片基础样式 -->
  <style>
    .swipe {
     overflow: hidden;
     visibility: hidden;
     position: relative;
    }
    .swipe-wrap {
     overflow: hidden;
     position: relative;
    }
    .swipe-wrap > div {
     float:left;
     width:100%;
     position: relative;
     font-size:140px; /* 这里样式是为了演示方便，我特意加的 */
    }
  </style>
</head>
<body>
  <!-- 幻灯片实例代买，前两层是外围容器 -->
  <div id='slider' class='swipe'>
   <div class='swipe-wrap'>
    <!-- 这三个是幻灯片内容，其中1，2,3等数字可换成图片，样式根据需求更改即可 -->
    <div>1</div>
    <div>2</div>
    <div>3</div>
   </div>
  </div>
  <!-- 页面幻灯片运行脚本（初始化） -->
  <script>
    window.mySwipe = Swipe(document.getElementById('slider'));
  </script>
</body>
</html>

以上代码运行结果：通过鼠标点击或者放到手机上手指滑动，就可以看见幻灯片的运行效果了。当然，当前只是最基本的，全部都是默认配置。我们完全可以通过下面提供的参数，结合自己的需求，自义定出更好的效果来。 startSlide Integer (default:0) - index position Swipe should start at（滑动的索引值,即从*值开始滑动，默认值为0） speed Integer (default:300) - speed of prev and next transitions in milliseconds.（滑动的速度，默认值300毫秒） auto Integer - begin with auto slideshow (time in milliseconds between slides)（自动滑动，单位为毫秒） continuous Boolean (default:true) - create an infinite feel with no endpoints（是否循环滑动，默认值为true） disableScroll Boolean (default:false) - stop any touches on this container from scrolling the page（停止任何触及此容器上滚动页面，默认值flase） stopPropagation Boolean (default:false) - stop event propagation（停止事件传播,默认值flase） callback Function - runs at slide change.（回调函数） transitionEnd Function - runs at the end slide transition.（滑动过渡时调用的函数）下面就是官方给的演示例子：

window.mySwipe = new Swipe(document.getElementById('slider'), {
 startSlide: 2,
 speed: 400,
 auto: 3000,
 continuous: true,
 disableScroll: false,
 stopPropagation: false,
 callback: function(index, elem) {},
 transitionEnd: function(index, elem) {}
});

从中我们不难看出具体参数的使用方法和位置。这一个如果感兴趣，可以根据需要，自己加入参数试试，都是以json对象存在于Swipe的第二个参数的。那么除了以上参数，Swipe还提供了一些常用的方法（API）: prev() slide to prev（上一页） next() slide to next（下一页） getPos() returns current slide index position（获取当前索引位置） getNumSlides() returns the total amount of slides（获取所有滑块总数） slide(index, duration) slide to set index position (duration: speed of transition in milliseconds)（指数，持续时间）滑动设置索引位置（持续时间：转型速度以毫秒为单位）都是一些简单的接口方法，你可以Js调用他们以达到你想要的效果。下载地址：[url=https://github.com/thebird/swipe/]https://github.com/thebird/swipe/[/url]

全部评论(0)

上一篇：JS event使用方法详解
下一篇：Js+CSS 文字渐隐渐现显示

资讯排行榜
更多>>