模板建站,莱芜摩托车网站,网站建设挣钱么,织梦网站模板视频教程这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法#xff0c;具有一定的参考价值#xff0c;可以用来参考一下。感兴趣的小伙伴#xff0c;下面一起跟随512笔记的小编两巴掌来看看吧#xff01;版本选择swiper是个常用的插件#xff0c;现在已经迭代到了第四代…这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法具有一定的参考价值可以用来参考一下。感兴趣的小伙伴下面一起跟随512笔记的小编两巴掌来看看吧版本选择swiper是个常用的插件现在已经迭代到了第四代swiper4。常用的版本是swiper3和swiper4我选择的是swiper3。安装安装swiper3的最新版本3.4.2:代码如下npm i swiper3.4.2 -S这里一个小知识查看node包的所有版本号的方法代码如下npm view 包名 versions组件编写swiper官方的使用方法分为4个流程加载插件HTML内容给Swiper定义一个大小初始化Swiper我也按照这个流程编写组件加载插件代码如下import Swiper from swiper;import swiper/dist/css/swiper.min.css;HTML内容代码如下Slide 1Slide 2Slide 3给Swiper定义一个大小代码如下.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, {})}完成将以上的代码合并起来代码如下Slide 1Slide 2Slide 3import Swiper from swiper;import swiper/dist/css/swiper.min.css;export default {mounted(): {var mySwiper new Swiper(.swiper-container, {})}}.swiper-container {width: 600px;height: 300px;}运行你看可以实现轮播图的效果了。但是到此为止只实现了轮播的效果还没有对数据的渲染。对数据的渲染在实际项目中swiper插件常用于实现banner图的效果(新浪手机版)【512pic.com温馨提示图片暂缺】数据的获取我用在vue项目中常用ajax插件axios来示例代码如下axios.get(/user?ID12345).then(function (response) {this.imgList response;}).catch(function (error) {console.log(error);});将获取数据的数据结构规定为代码如下[https://www.baidu.com/img/baidu_jgylogo3.gif,https://www.baidu.com/img/baidu_jgylogo3.gif,https://www.baidu.com/img/baidu_jgylogo3.gif,https://www.baidu.com/img/baidu_jgylogo3.gif,https://www.baidu.com/img/baidu_jgylogo3.gif]列表渲染代码如下.swiper-slide {width: 100%;height: 400px;}到此为止已经将数据渲染完成了但是查看实际效果似乎banner无法实现轮播图的效果啊。这里只是将图片渲染了出来但是渲染出轮播图并没有被初始化。因为初始化已经在生命周期mounted时完成了。初始化所以在获取数据且DOM更新后需要重新初始化swiper。代码如下axios.get(/user?ID12345).then(function (response) {// 获取数据更新this.imgList response;// DOM还没有更新this.$nextTick(() {// DOM更新了// swiper重新初始化/* eslint-disable no-new */new Swiper(.swiper-container, {})})}).catch(function (error) {console.log(error);});到此轮播图的效果实现了。总结swiper是我们平时很常用的插件但将swiper导入vue项目中遇到的问题不少。最主要的问题是要搞懂vue的生命周期这样才能有效地使用各种js插件。以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持512笔记。注关于vue项目中导入swiper插件的方法的内容就先介绍到这里更多相关文章的可以留意512笔记的其他信息。关键词vue.js
