在vue3中使用swiper

最近练手的项目中使用到了swiper，需要修改swiper底部的样式，花了挺长时间，记录一下。

swiper样式修改

swiper的宽度取决于包裹swiper元素的宽度，在swiper中包含swiper-wrapper和swiperpagination。

swiper-wrapper中是一个个swiper-slide。

swiper-pigination默认位于swiper的底部。正常情况下，pigination会显示在swiper-slide中内容的下方。如果想要把pigination和内容隔开，可以给swiper或者swiper-wrapper增加padding-bottom。

修改pigination的样式在类swiper-pagination-bullet和swiper-pagination-bullet-active里面添加样式覆盖默认的样式。

.swiper {
  padding-bottom: 80px;

  :deep(.swiper-wrapper) {
    height: 591px;

    .swiper-slide {
      display: flex;
      flex-direction: column;
    }
  }

  :deep(.swiper-pagination) {
    .swiper-pagination-bullet {
      width: 56px;
      height: 6px;
      border-radius: 4px;
      background-color: hsla(0, 0%, 100%, 0.5);
    }

    .swiper-pagination-bullet-active {
      background-color: #fff;
    }
  }
}

在vue3中引入swiper

全局引入，参看app.use的用法

import { Swiper, SwiperSlide } from 'swiper/vue'

// Import Swiper styles
import 'swiper/less'
import 'swiper/less/pagination'

// SwiperCore.use([Pagination, Autoplay]);
const plugins = [Swiper, SwiperSlide]

const swiperPlugins = {
  install: function (app) {
    plugins.forEach((item) => app.component(item.name, item))
  }
}

export default swiperPlugins

在main.js中使用

import swiperPlugins from './plugins/swiper'
app.use(swiperPlugins)

单个组件引入，在需要使用的组件的script标签中添加

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';

配置swiper的Navigation、Pigination等

// import Swiper core and required modules
import { Navigation, Pagination } from 'swiper/modules';

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

const modules = [Navigation, Pagination];

在swiper标签中使用

<swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
>

    <swiper-slide></swiper-slide>
      ...
  </swiper>

---

之后遇到了竖向需要竖向滑动swiper的情况，可以直接在swiper配置中修改deriction,如下：

<swiper direction="vertical">
    ...
<swiper>

但是在滑动时却只能看到第一个slide，第一slide滑动之后看不到后续的slide了，都不知道该怎么搜素问题，最后是一个前辈告诉我可以给swiper配置autoHeigt和 setWrapperSize,如下：

<swiper direction="vertical" autoHeight="true" setWrapperSize="true">
    ...
<swiper>

其实官网是有写的，我没仔细看，浪费很多时间在网上翻答案。配置好后滑动还是有些小问题，不过大概知道问题出了哪里了。把方向设置为vertical后，每一个slide的高度自动变成了一个非常大的数字，盲猜是高度的最大值，所以滑动第一个slide后看不到之后的slide了。通过设置autoHeight将高度变成了当前所有slide高度的总和，虽然滑动之后会有空白，但是可以看到下一个slide了。为了解决这个空白，我给swiper-wrapper设置了高度,设置完成后就可以正常滑动了。

.swiper .swiper-wrapper {
  height: 100vh;
}