移动端轮播图滑动插件-swipe基本使用和应用

2018-5-24

swipe和swiper都是移动端触摸滑动类的插件，使用方便，比自己写原生或者jQuery要简单很多，今天先总结一下swipe的基本使用和应用，swiper功能更多更酷炫，改天详细的总结一下。

swipe.js是一个轻量级的移动滑动组件，支持触摸移动，支持响应式页面。

使用方法：

HTML

<section id="slider" class="swipe">
    <ul class="swipe-wrap">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</section>

结构有三层，最外层盒子要设置id和class，第二层盒子包裹着要滑动的元素要设置class，最内层就是滑动的元素了，不一定是ul和li，只要结构对了，用div也可以的。

.swipe{
    overflow: hidden;
    position: relative;
}
.swipe-wrap{
    over-flow:hidder;
    position:relative;
}
.swipe .swipe-wrap li{
    position: relative;
    float: left;
}

这里css中只保留了必须设置的样式，其他样式根据自己需要设置就可以了。

JS中只需要添加一句

var slider = Swipe(document.getElementById('slider')

就可以实现拖动了！

swipe还提供了一些参数的设置：

var slider = Swipe(document.getElementById('slider'), {
1. startSlide Integer (默认:0) - swipe开始的索引,就是开始滑动的那一页
2. speed Integer (默认:300) - 页面过渡的速度
3. auto Integer - 自动滑动 
4. continuous Boolean (默认:true) -是否可以循环播放
5. disableScroll Boolean (默认:false) - 停止触摸滑动
6. stopPropagation Boolean (默认:false) -停止事件传播
7. callback Function - 在成功过渡后执行
8. transitionEnd Function - 在动画结束后执行
});

swipe扩展了几个函数，以便于更好的通过脚本来控制滑动。

prev() 上一页

next() 下一页

getPos() 返回当前的索引

getNumSlides() 返回滑块总数

slide(index, duration) 设置滑到的索引 (duration: 转化的速度，单位毫秒)

swipe的问题：

swipe只提供简单轮播切换，想要在底部添加圆点颜色切换需要重新写html（例子中有添加圆点）。
用手势滑动之后，自动滚动就会失效，这时一个bug，需要将swipe.js插件源代码进行修改，添加一个判断：

function stop() {
    var delay = 0;
    delay = options.auto > 0 ? options.auto : 0;
    clearTimeout(interval);
  }

适合简单的轮播需求，体积小，减少资源消耗。

下面是利用swipe做了两个小demo

1.模仿携程移动端，banner部分使用swipe制作轮播效果。

圆点要添加html结构，并且在js中利用callback函数给当前图对应的圆点加类名；圆点也要添加相应的点击事件。

2.模仿淘宝移动端平台通知，利用swipe制作了一个可以手势滑动切换的界面。

THE END