当swiper数量不足时居中显示

当swiper-slide的数量不足设置的每页显示数量时自动居中

每每被天敌（产品经理）提出需求说：这个轮播数量不足你要居中呀，那个轮播数量不足你要剧中呀。每次写相同代码，几经折磨后终于决定封装实现该功能的方法。


（使用TS构建方法，需要引用jquery来支持操作dom）

！注意该方法暂无法适配slide宽度自定义的swiper，后续可能会增加

css代码

.flex {
    display: flex;
}

.flex_column {
    flex-direction: column;
}

.flex_wrap {
    flex-wrap: wrap;
}

.flex_row_center {
    justify-content: center;
}

.flex_row_start {
    justify-content: flex-start;
}

.flex_row_end {
    justify-content: flex-end;
}

.flex_row_justify {

    justify-content: space-between;
}

.flex_column_center {
    align-items: center;
}

.flex_column_start {
    align-items: flex-start;
}

.flex_column_end {
    align-items: flex-end;
}

.flex1 {
    flex: 1;
}

.flex_rank_1 {
    order: 1;
}

.flex_rank_2 {
    order: 2;
}

 

TS封装方法代码（可以根据需要改为JS）

 

let swiper: any;
/**
 * description: swiper数量不足时居中
 * ！无法适用于自定义swiper-slide宽度的swiper
 * param {object} obj swiper对象集合
 * param {Array} name 需要居中swiepr / 需要排除的swiper
 * param {boolean} sort true为选中，false为排除
 * return {*}
 * author: 异类
 */
export function swiperCenter(obj: any, name: Array<string>, sort: boolean) {

    let swiperKey: Array<string> = Object.keys(obj); //轮播对象key集合
    swiper = obj; //赋值swiper集合

    if (sort) { // 判断是选中还是排除
        swiperCenterCode(name);
    } else {
        let names = swiperKey.filter(item => { //反选swiper
            if (name.indexOf(item) == -1) {
                return item;
            }
        })
        swiperCenterCode(names);
    }
}

/**
 * description:  swiper数量不足时居中
 * param {Array} name 需要居中swiepr / 需要排除的swiper
 * return {*}
 * author: 异类
*/
function swiperCenterCode(name: Array<string>) {
    for (let item of name) {
        let breakpoints: any = swiper[item].originalParams.breakpoints;// 获取swiper响应属性
        let slidesPerView: string = swiper[item].originalParams.slidesPerView; //获取初始设置数量
        let itemK: Array<string>;
        if (slidesPerView != undefined) {//判断是否有设置最初显示数量
            if (breakpoints) {// 如果swiper有响应就进行对比后判断居中，如果没有直接进行判断居中
                itemK = Object.keys(breakpoints); //获取响应区间数值组成数组
                if (window.innerWidth > Number(itemK[itemK.length - 1])) { //判断当前宽度是否小于响应最大宽度
                    if ($(swiper[item].container.selector).find('.swiper-slide').length <= Number(slidesPerView)) { //判断当前swiper-slide数量是否小于等于该区间下设置显示数量
                        $(swiper[item].container.selector).find('.swiper-wrapper').addClass('flex flex_row_center');
                    } else {
                        $(swiper[item].container.selector).find('.swiper-wrapper').removeClass('flex flex_row_center');
                    }
                }
            } else {
                console.log($(swiper[item].container.selector).find('.swiper-slide').length)
                if ($(swiper[item].container.selector).find('.swiper-slide').length <= Number(slidesPerView)) {
                    $(swiper[item].container.selector).find('.swiper-wrapper').addClass('flex flex_row_center');
                } else {
                    $(swiper[item].container.selector).find('.swiper-wrapper').removeClass('flex flex_row_center');
                }
            }

            if (breakpoints) {
                for (let i = 0; i < itemK.length; i++) { //循环响应区间数值数组
                    if (itemK[0] != itemK[i]) {
                        if (window.innerWidth > Number(itemK[i + 1]) && window.innerWidth < Number(itemK[i])) { //判断当前屏幕宽度是否处在区间内
                            if ($(swiper[item].container.selector).find('.swiper-slide').length <= breakpoints[itemK[i]].slidesPerView) {//判断当前swiper-slide数量是否小于等于该区间下设置显示数量
                                $(swiper[item].container.selector).find('.swiper-wrapper').addClass('flex flex_row_center');
                            } else {
                                $(swiper[item].container.selector).find('.swiper-wrapper').removeClass('flex flex_row_center');
                            }
                        }
                    } else {
                        if (window.innerWidth < Number(itemK[0])) { //判断当前屏幕宽度是否处在区间内
                            if ($(swiper[item].container.selector).find('.swiper-slide').length <= breakpoints[itemK[i]].slidesPerView) {//判断当前swiper-slide数量是否小于等于该区间下设置显示数量
                                $(swiper[item].container.selector).find('.swiper-wrapper').addClass('flex flex_row_center');
                            } else {
                                $(swiper[item].container.selector).find('.swiper-wrapper').removeClass('flex flex_row_center');
                            }
                        }
                    }
                }

            }
        }

    }
}

 

TS引用代码

 

let swiper: any = {};
swiper.mySwiper1 = new Swiper('.swiper1', { //轮播方法赋值给轮播对象
    autoplay: 5000,//可选选项，自动滑动
    slidesPerView: 4,
    breakpoints: {
        //当宽度小于等于320
        480: {
            slidesPerView: 2,
            spaceBetween: 10
        },
        //当宽度小于等于480
        768: {
            slidesPerView: 3,
            spaceBetween: 20
        },
        //当宽度小于等于640
        1200: {
            slidesPerView: 4,
            spaceBetween: 30
        }
    }
});
let swiperName = ['mySwiper2', 'mySwiper3']; //需要居中的轮播名或者排除居中的轮播名
/**
 * description:
 * param {object} obj swiper对象集合
 * param {Array} name 需要居中swiepr / 需要排除的swiper
 * param {boolean} sort true为选中，false为排除
 */
swiperCenter(swiper, swiperName, true);//调用方法

 

实现方法，首先把每个swiper都赋值给一个变量。

然后根据传调用方法传入的键值来寻找到对应的swiper对象。通过对象中含有的参数来判断是否给swiper增加类名来控制是否居中。

自此只需要调用方法即可完成居中。（再也不怕产品经理后期提出增加该需求了）