轮播——swiper

swiper组件

　　1、轮播数据是使用ajax进行填充的话，可能数目是0~n，在数目是1时，轮播会出现一些问题（出现空白侧），这时需作出判断（一张图片不滑动，多张就就行滑动），方法如下（以下方法中，size()不行的话可以换成length）：

　　方案一： 先判断是否只有一个图，是的话初始化时传入不可拖动的参数
　　var isNoSwiping = false;
　　if($(".swiper-container .swiper-slide").size() == 1) { //判断有多少张图在内，如果只有一张，初始化时初始化为不可拖动

　　　　isNoSwiping = true;

　　　　var mySwiper = new Swiper('.swiper-container',{

　　　　　　noSwiping : isNoSwiping,
　　　　})；

　　}

　　方案二 初始化前先判断是否只有一个，若是，不执行初始化函数

　　if($(".swiper-container .swiper-slide").size() != 1) {

　　　　var mySwiper = new Swiper(".swiper-container") ;
　　}

　　方案三 初始化后，判断是否只有一个，若是，销毁swiper

　　var mySwiper = new Swiper('.swiper-container');
　　if($(".swiper-container .swiper-slide").size() == 1){

　　　　 mySwiper.destroy(false);

　　}

使用示例：

// 品牌推荐 start
function getBrand() {
    var success = function (json) {
        var html = "";
        $(json.Rows).each(function (index, item) {
            html += ' <div class="swiper-slide" onclick="goUrl(\'brandDetailMore.aspx?brand_id=' + item.brand_id + '&brand_name=' + item.brand_name + '\')"> ';
            html += '   <div class="brandBox"> ';
            html += '     <div class="brandPicBox"> ';
            html += '       <img  src="' + item.imgPath + '" /> ';
            html += '     </div> ';
            html += '     <div class="brandImgBox"> ';
            if (IsEmpty(item.brand_logo)) {
                html += '   <span>' + item.brand_name + '</span>';
            } else {
                html += '   <img src="' + item.brand_logo + '" />';
            }
            html += '     </div> ';
            html += '   </div> ';
            html += ' </div> ';
        });

        if (json.Rows.length > 0) {
            $(".isShowBrand").show();
            $(".brandSwiper .swiper-wrapper").html(html);
        }

        if ($(".brandSwiper .swiper-slide").length <= 2) {
            $(".brandSwiper").css("width", "90%");
            $(".swiper-slide").css({ "width": "80%", "height": "280px" });
            $(".brandBox").css("box-shadow", "0px 0px 1px 1px #dbdbdb inset");
            $(".brandSwiper .swiper-slide .brandPicBox").css("height", "70%");
            $(".brandSwiper .swiper-slide .brandImgBox").css({ "width": "40%", "height": "30%" });
            var mySwiper = new Swiper('.brandSwiper', {
                pagination: '.swiper-pagination .brandSwiper',
                slidesPerView: '1',
                centeredSlides: false,
                autoplay: 3000,
                speed: 1000,
                autoplayDisableOnInteraction: false,
                paginationClickable: true
            });

        } else {
            var wheelSwiper = new Swiper(".brandSwiper", {
                slidesPerView: 'auto',
                centeredSlides: true,
                loop: true,
                speed: 1000,
                autoplay: 3000,
                noSwiping: false,
                paginationClickable: false,
                pagination: '.swiper-pagination .brandSwiper',
                autoplayDisableOnInteraction: false,
                observer: true,
                observeParents: true
            });
        }
    }

    var par = {
        act: "GetPageData",
        store_id: tostore,
        pagesize: 5,
        type_id: type_id
    };
    //通过yt-public-common-function.js中的公s共请求函数
    JsAjax("/Handle/nc_brandHandle.ashx", par, success);

}
// 品牌推荐 end

 2、关于swiper-slide元素垂直布局，会默认为高度为设备的高度，即使设置每一个元素的具体高度，在滑动时还是会出现空白页，解决方法是在初始化时设定一个高度值，如height: 20。（注意不带单位，效果查证可通过swiper官网例子查看）。

 3、使用swiper组件，初始化带有spaceBetween属性，一般UI设计中，左右两边应该是不留白的，或者说滑向的那边是不留白的，但因为前面划过去的元素因spaceBetween而使右边会有些空白间距，*改善页面效果可以通过设置slidesPerGroup:1，每次滑动只滑动一个。（如果slidesPerGroup、slidesPerView一样的话会以组[两个以上]为一轮滑动）。

4、在IOS上，组件设置循环轮播时，最后一张切换会出现闪现，了解到swiper组件有使用到一些CSS3动画效果，如transform3D(0,0,0)，可设置hack方法处理闪动问题（transform-style: preserve-3d;backface-visibility:hidden;perspective: 1000注意添加前缀）。

.swiper-wrapper, .swiper-slide {
　　-moz-transform: translate3d(0,0,0);
　　-webkit-transform: translate3d(0,0,0);
　　transform: translate3d(0,0,0);

　　-moz-transform-style: preserve-3d;
　　-webkit-transform-style: preserve-3d;
　　transform-style: preserve-3d;
　　-moz-backface-visibility: hidden;
　　-webkit-backface-visibility: hidden;
　　backface-visibility: hidden;
　　-moz-perspective: 1000;
　　-webkit-perspective: 1000;
　　perspective: 1000;
}

5、在IOS上，组件设置 swiper-container高度由最长的swiper-slide决定解决方法

6、swiper4

7、swiper可以设置swiper-slide的切换效果

　　https://www.manongdao.com/article-1291551.html
　　注意如果设置effect: 'fade' swiper-slide背景色为白色或其它

8、swiper-slide高度不统一时

待续~