Swiper插件读后感

CODING 发布于2019-08-20 17:53 / 2318人阅读

摘要：今天，我无意中看到这样一个东西，它叫做，这是一个开源免费的适用于各种移动端的触摸滑动插件。同时导航栏也是可以手动滑动的，当用户手动滑动导航栏，点击某一个板块时，下面的内容部分会随即滑到相应的内容块。

今天，我无意中看到这样一个东西，它叫做Swiper，这是一个开源免费的适用于各种移动端的触摸滑动插件。
看了一遍文档，发现并不是很难，于是打算动手自己写一个Swiper官网上的稍复杂点的小demo，看看自己理解的如何。
我所实现的功能是这样的：
这是一个超出后自适应的导航：
什么叫做超出后自适应呢？就是当我左右滑动内容部分的时候，上面导航部分会跟随显示当前导航nav，当我滑到第四页时，由于超过了当前显示的nav,导航栏会自行向下滑动一格，与内容栏保持一致。同时导航栏也是可以手动滑动的，当用户手动滑动导航栏，点击某一个板块（nav）时，下面的内容部分会随即滑到相应的内容块。

实现的JS代码如下：

/**
 * Created by 张丽娟 on 2017/7/10.
 */
window.onload = function () {
    var swiper1 = new Swiper(".swiper-container1" ,{
        slidesPerView:3,
        watchSlidesProgress : true,
        watchSlidesVisibility : true
    });   
    var swiper2 = new Swiper(".swiper-container2" ,{
        watchSlidesProgress : true,
        watchSlidesVisibility : true,
        onSlideNextStart:function(swiper){
            var $cur_slide = $(".swiper-slide.active",".swiper-container1 .sw1");
            if($cur_slide.next().hasClass("swiper-slide-visible")){
                $cur_slide.next().addClass("active").siblings().removeClass("active");
            }else{
                swiper1.slideNext();
                $cur_slide.next().addClass("active").siblings().removeClass("active");
            }
        },
        onSlidePrevStart:function (swiper) {
            var $cur_slide = $(".swiper-slide.active",".swiper-container1 .sw1");
            if($cur_slide.prev().hasClass("swiper-slide-visible")){
                $cur_slide.prev().addClass("active").siblings().removeClass("active");
            }else{
                swiper1.slidePrev();
                $cur_slide.prev().addClass("active").siblings().removeClass("active");
            }
        }
    });

    $(".swiper-slide",".swiper-container1 .sw1").click(function () {
        var targetIndex = swiper1.clickedIndex;
        //alert(targetIndex);
        $($(".swiper-slide",".swiper-container1 .sw1")[targetIndex]).addClass("active").siblings().removeClass("active");
        swiper2.slideTo(targetIndex, 500, false);
    })
};

使用Swiper插件可以很容易的实现移动端的滑动显示需求，Swiper文档中有很多的方法提供我们使用，
定制自定义的某些功能也比较方便，只要梳理好功能逻辑，然后灵活运用其方法即可。
但是通过写这个小的功能，我发现了一个问题：
当左右滑动内容部分的时候，需要快速滑动才能Swiper才能检测到滑动，并执行onSlideNextStart和onSlidePrevStart方法，如果缓慢的移动内容块，只能看到内容块的滑动完成，Swiper无法检测到滑动，因此无法执行onSlideNextStart和onSlidePrevStart方法。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83945.html

vue轮播图插件之vue-awesome-swiper

摘要：移动端轮播图插件，在使用图形界面插件中的组件无法实现触摸滑动后，转而使用插件安装我这里安装的是下面的这个版本使用全局导入样式的话，我这里有用到分页器，就在全局中引入了样式组件引入在中使用常见的小圆点移动端轮播图插件，在使用iview图形界面插件中的carousel组件无法实现触摸滑动后，转而使用vue-awesome-swiper插件 1.npm安装 npm i vue-awesom...

binta 2019-08-23 12:00 评论0 收藏0
解决swiper.js中无缝轮播的问题。

摘要：根据公司需求需要对让轮播无间隙播放，类似这种效果。通过查看代码，发现这个类中有个属性修改中的源码，将这个属性的值改为即可实现无缝隙轮播，就是这么简单。轮播有它的好处是纯打造的滑动特效插件，面向手机平板电脑等移动终端。根据公司需求需要对让轮播无间隙播放，类似这种效果：http://www.16sucai.com/upload...。因为偷懒用的是swiper.js插件编写的。swipe...

tuniutech 2019-08-30 14:05 评论0 收藏0
解决swiper.js中无缝轮播的问题。

摘要：根据公司需求需要对让轮播无间隙播放，类似这种效果。通过查看代码，发现这个类中有个属性修改中的源码，将这个属性的值改为即可实现无缝隙轮播，就是这么简单。轮播有它的好处是纯打造的滑动特效插件，面向手机平板电脑等移动终端。根据公司需求需要对让轮播无间隙播放，类似这种效果：http://www.16sucai.com/upload...。因为偷懒用的是swiper.js插件编写的。swipe...

cnio 2019-08-01 18:39 评论0 收藏0
解决swiper.js中无缝轮播的问题。

摘要：根据公司需求需要对让轮播无间隙播放，类似这种效果。通过查看代码，发现这个类中有个属性修改中的源码，将这个属性的值改为即可实现无缝隙轮播，就是这么简单。轮播有它的好处是纯打造的滑动特效插件，面向手机平板电脑等移动终端。根据公司需求需要对让轮播无间隙播放，类似这种效果：http://www.16sucai.com/upload...。因为偷懒用的是swiper.js插件编写的。swipe...

Rocko 2019-08-22 14:59 评论0 收藏0
vue-awesome-swiper滑块插件使用基础

摘要：前言目前在使用建立的版项目中，直接引入官方的文件会导致报错，所以需要用到版本的。安装版配置使用可参考插入滑块组件与官方相同，额外的控制器依然可以放到整个滑块之外。前言目前(2017-07-11)在使用vue-cli建立的webpack版项目中，直接引入官方的swiper文件会导致报错，所以需要用到vue版本的swiper。 webpack-simple版可直接引入官方swiper文...

microelec 2019-08-20 17:54 评论0 收藏0