如何在vue中使用swiper插件

1、前言

今天用vue3.0写项目的时候，想要用swiper插件做轮播。其实之前我也用过，也遇到这个问题，但是我记性不好，就把这个关键的问题又忘记啦，今天又遇到这个坑，所以打算记录一下，以免自己以后又忘记。

我们在vue中使用swiper的时候，一定要用setTimeout来初始化swiper组件。这也是我们经常遇到的一个坑。如果用的轮播比较简单，其实elementUI里面自带的走马灯也是不错的选择。

2 、安装方法

// 使用指令安装
npm i swiper@3.4.2 -S

3、加载插件

加载js

//在你需要引入swiper的页面加载js插件
import Swiper from "swiper"

加载css，注意路劲

//在你需要引入swiper的页面加载css插件，注意路径
@import "../../node_modules/swiper/dist/css/swiper.min.css";
@import "../../node_modules/swiper/dist/css/swiper.css";

4、在methods中初始化一个 _initSwiper

_initSwiper(){
//这里放轮播的js代码
}

5、在created里面调用_initSwiper

this._initSwiper();

6、重中之重，因为swiper的渲染时间太早,所以一定要用setTimeout来初始化swiper组件

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