swiper网格布局

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/hu_Time/article/details/102756302

需要引用：

使用前需要引用swiper.css文件以及swiper.js文件

html:

    <!-- 选项列表 -->
    <div class="lie-list">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div>
                        <img src="" alt="">
                        <span>测试测试</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

css:

.lie-list {
     width: 100%;
     height: 12rem;
     margin: 0 auto;
     padding: 0 5%;
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
     background-color: #fff;
     box-sizing: border-box;
 }
 
 .lie-list .swiper-container,
 .lie-list .swiper-wrapper {
     width: 100%;
     height: 100%;
 }
 
 .lie-list .swiper-slide {
     height: 100%;
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
     padding: 0;
     margin: 0;
 }
 
 .lie-list .swiper-slide a {
     display: flex;
     width: 25%;
 }
 /* .lie-list .swiper-slide .lie {
     width: 100%;
     height: 49%;
     display: flex;
     justify-content: space-between;
     border: 1px solid black;
 } */
 
 .lie-list .swiper-slide a div {
     width: 100%;
     height: 50%;
     display: flex;
     margin: 0;
     justify-content: center;
     align-items: center;
     flex-wrap: wrap;
 }
 
 .lie-list .swiper-slide div img {
     width: 3rem;
     height: 3rem;
     border-radius: 0;
     margin-bottom: 0.3rem;
 }
 
 .lie-list .swiper-slide div span {
     /* color: #ffffff; */
     font-size: 0.9rem;
     color: #3A3A3A;
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
 }

js:

    var swiper = new Swiper('.lie-list .swiper-container', {
        slidesPerView: 4, //一行显示4个
        slidesPerColumn: 2, //显示2行
        slidesPerColumnFill: 'row', //行布局

    });

实际效果：

为了不重复代码所以本代码html只写了一个swiper-slide选项，使用的话可以进行循环或者复制即可实现以下效果

注：
slidesPerColumnFill：
column:列布局

row：行布局