这个问题困扰了本人好几天,调样式调的头疼,最后同组的老大给我指点迷津,其实不必要每个swiper容器都要将宽高定义,但是swiper-slide需要一个高,里面的内容可以自己更换,老大的一句其实很简单,总能让人如醍醐灌顶一样,恍然大悟,或许这就是经验的力量吧。
下面进入正题:

参考swiper官方文档的示例进行更改,将html换到vue中即可,
代码如下:
template中定义好数据,这里就用静态页面代替了:

<template>
    <div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide">Slide 1</div>
              <div class="swiper-slide">Slide 2</div>
              <div class="swiper-slide">Slide 3</div>
              <div class="swiper-slide">Slide 4</div>
              <div class="swiper-slide">Slide 5</div>
              <div class="swiper-slide">Slide 6</div>
              <div class="swiper-slide">Slide 7</div>
              <div class="swiper-slide">Slide 8</div>
              <div class="swiper-slide">Slide 9</div>
              <div class="swiper-slide">Slide 10</div>
            </div>
        </div>
    </div>
</template>

HTML

COPY

之后是在js部分需要初始化swiper
import Swiper from 'swiper'
然后在mounted中初始化

  var swiper = new Swiper('.swiper-container', {
      slidesPerView: 3,
      slidesPerColumn: 2,
      spaceBetween: 30,
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
    });

JavaScript

COPY

最后写一下样式即可
注意这里写完之后slide内部的样式还需要自己写

    .swiper-container {
      width: 100%;
      height: 100%;
      margin-left: auto;
      margin-right: auto;
        .swiper-slide {
          text-align: center;
          font-size: 18px;
          background: #fff;
          height: calc((100% - 30px) / 2);

          /* Center slide text vertically */
          display: -webkit-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
        }
    }
Logo

前往低代码交流专区

更多推荐