vue项目中导入swiper插件的方法
发布时间：2020-12-17 02:36:48 所属栏目：百科 来源：网络整理
导读：版本选择 swiper是个常用的插件，现在已经迭代到了第四代：swiper4。 常用的版本是swiper3和swiper4，我选择的是swiper3。 安装 安装swiper3的最新版本3.4.2: 这里一个小知识，查看node包的所有版本号的方法： 组件编写 swiper官方的使用方法分为4个流程：
版本选择swiper是个常用的插件，现在已经迭代到了第四代：swiper4。 常用的版本是swiper3和swiper4，我选择的是swiper3。 安装安装swiper3的最新版本3.4.2: 这里一个小知识，查看node包的所有版本号的方法： 组件编写swiper官方的使用方法分为4个流程：
我也按照这个流程编写组件： 加载插件HTML内容给Swiper定义一个大小初始化Swiper因为dom渲染完成才能初始化Swiper，所以必须将初始化放入vue的生命周期钩子函数mounted中： 以上代码中的/* eslint-disable no-new */是启用的eslint代码检测的项目可以使用，如果没有使用eslint可用使用一下代码： 完成将以上的代码合并起来： 运行，你看可以实现轮播图的效果了。但是到此为止只实现了轮播的效果，还没有对数据的渲染。 对数据的渲染在实际项目中swiper插件常用于实现banner图的效果（新浪手机版）：
数据的获取我用在vue项目中常用ajax插件axios来示例： 将获取数据的数据结构规定为： 列表渲染 |
