关于组件

时间：2019-08-12 20:25:42 阅读：75 评论：0 收藏：0 [点我收藏+]

swiper组件

　　轮播数据是使用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

关于组件

原文：https://www.cnblogs.com/L-xjco/p/11342230.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)