在vue2.0中使用swiper

627 阅读1分钟

1,首先安装依赖包。注意:在vue2.0中swiper6以上的版本都无法使用,所以我这里选择npm install swiper@5.4.5

2, 可全局引入swiper.css - import 'swiper/css/swiper.min.css'

3, 可在使用的页面引入swiper的js包 import Swiper from "swiper/js/swiper";

4, 可直接按照框中格式定义class , class为item内的内容可随意定义为你想要的格式,

注意:ref下文中会用到; 图片.png

5,可根据文档定义swiper的一些方法,通过ref选中dom.

图片.png

6, 在mounted中调用方法

图片.png 这里用定时器主要是为了防止数据还没请求回来导致swiper渲染失败