vue导入swiper_vue项目中导入swiper插件的方法
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧!
版本选择
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定义一个大小
代码如下:
.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', {})
}
完成
将以上的代码合并起来:
代码如下:
import 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?ID=12345')
.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?ID=12345')
.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
vue导入swiper_vue项目中导入swiper插件的方法相关推荐
- 2021-11-29 vue移动端卖座电影项目(三) vue项目中使用Swiper插件,Film页面设置轮拨图,nowPlaying页面设置样式
文章目录 1.引入swiper.vue组件 目的 步骤 结果 2.把swiper-slide做成匿名插槽 3.Film.vue中通过axios请求获取后台轮播图片 目的 步骤 因为现在原网站已取消轮拨 ...
- 实战:vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装 安装swiper3的最新版本3.4.2: ...
- vue项目中导入视频
vue项目中引入视频插件 一.安装插件 vue-video-player npm install vue-video-player -s 二.在main.js里倒入并使用 import VideoPl ...
- Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css
Vue中引入swiper插件报错:To install it, you can run: npm install --save swiper/css/swiper.css 今天在写项目的时候用到了Sw ...
- idea2019导入maven项目中的某些问题
idea2019导入maven项目中的某些问题 idea2019导入maven项目,会出现很多莫名其妙的问题,需要注意的是如果是idea2019的版本是3月以前的,那会maven需要下载3.6.1以前 ...
- html整个项目怎么导出来,怎样将jquery导入web项目中?
怎样将jquery导入web项目中?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 将jquery导入web项目中的方法 导入jquery文件 在页面中使 ...
- Eclipse导入的项目中的中文都是乱码,如何解决?
Eclipse导入的项目中的中文都是乱码,如何解决? eclipse之所以会出现乱码问题是因为eclipse编辑器选择的编码规则是可变的.一般默认都是UTF-8或者GBK,当从外部导入的一个工程时,如 ...
- 解决vue中使用swiper插件——李帅醒博客
解决vue中使用swiper插件,在引入swiper插件后,发现无法正常运行 这次我们模拟从后台取下数据,然后数据绑定在swiper标签中. <template><div class ...
- 将Ext JS 5应用程序导入Web项目中
将Ext JS 5应用程序导入Web项目中 相关资料: http://docs.sencha.com/extjs/5.1/getting_started/welcome_to_extjs.html 效 ...
最新文章
- Docker核心技术之容器详解
- Xcode and Unity missing library ‘lGoogleUtilities‘
- 创建一个二维数组,以4行4列左对齐的方式将数组输出
- 小程序中里的bindinput_云开发实战分享|诗和远方:旅行小账本云开发
- mysql的启动脚本编写_老鸟带你开发专业规范的MySQL启动脚本
- 中秋海报设计素材|中秋节海报文案
- Port-A-Thon
- 重建同义词+oracle,Oracle中创建,删除同义词 Synonym
- 关键词文章生成器-智能关键词文章生成器
- 游戏源代码是什么意思_什么是游戏
- Secondary NameNode:究竟是什么?
- html页面太大了怎么调小,html – 如何在调整浏览器窗口大小时保持绝对定位的元素...
- 如何解决Vray for 3ds Max中的3个错误
- MTK androiod5.1源码精简系统APP
- java手机验证码登陆_在Web项目中手机短信验证码实现的全过程记录
- oracle的Minus的使用
- python3:设计一个动物声音“模拟器”,希望模拟器可以模拟许多动物的叫声
- 51单片机(二).STC89C52单片机的引脚功能
- xe-utils 计算:年份、月份、周、天、每月天数、月的第几周、年的第几天、年的第几周、日期倒计时、日期至今差距计算、任意日期格式化
- Oracle中的chr()函数与ascii()函数
热门文章
- 5.MongoDB索引
- 2016年10月计算机网络技术,2016年10月自考计算机网络技术练习题及答案(2)
- zillow房价预测比赛_Kaggle竞赛 —— 房价预测 (House Prices)
- ab的plc跟西门子哪个好些_2020滚筒洗衣机哪个牌子好?想买滚筒洗衣机的看过来!...
- 吴恩达,确诊新冠阳性!
- 屠榜CV还不是这篇论文的终极目标,它更大的目标其实是……
- 机器学习从理论到工程的第二步-开发环境与工具篇(下)
- 论文浅尝 - AAAI2020 | 多轮对话系统中的历史自适应知识融合机制
- 论文浅尝 - AAAI2020 | 多通道反向词典模型
- Android官方开发文档Training系列课程中文版:添加ActionBar之设置ActionBar