轮播——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决定解决方法