swiper是个常用的插件,现在已经迭代到了第四代:swiper4。常用的版本是swiper3和swiper4,我选择的是swiper3。安装安装swiper3的最新版本3.4.2:npm i swiper@3.4.2 -S这里一个小知识,查看node包的所有版本号的方法:npm view 包名 versions组件编写
swiper官方的使用方法分为4个流程:加载插件HTML内容给Swiper定义一个大小初始化Swiper我也按照这个流程编写组件:加载插件import Swiper from 'swiper'; import 'swiper/dist/css/swiper.min.css';HTML内容
swiper-container { width: 600px; height: 300px; }初始化Swiper因为dom渲染完成才能初始化Swiper,所以必须将初始化放入vue的生命周期钩子函数mounted中:mounted(): { /* eslint-disable no-new */ new Swiper('.swiper-container', {}) }
以上代码中的/* eslint-disable no-new */是启用的eslint代码检测的项目可以使用,如果没有使用eslint可用使用一下代码:mounted(): { var mySwiper = new Swiper('.swiper-container', {}) }完成
将以上的代码合并起来: