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内容

代码如下:

Slide 1
Slide 2
Slide 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 1
Slide 2
Slide 3

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/489936.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

设置MYSQL数据库编码为UTF-8

1、 编辑MySql的配置文件 MySql的配置文件Windows下一般在系统目录下或者在MySql的安装目录下名字叫my.ini,可以搜索,Linux下一般是/etc/my.cnf --在 [mysqld] 标签下加上以下内容: default-character-set utf8 character_set_server utf8…

5G核心网关键技术总览

来源:电子万花筒未来智能实验室是人工智能学家与科学院相关机构联合成立的人工智能,互联网和脑科学交叉研究机构。未来智能实验室的主要工作包括:建立AI智能系统智商评测体系,开展世界人工智能智商评测;开展互联网&…

samba安装_Centos安装Samba

1.先安装相关依赖以及库:yum install -y gcc-cyum install -y pcre pcre-develyum install -y zlib zlib-develyum install -y openssl openssl-devel2.下载nginx安装包:wget -c https://nginx.org/download/nginx-1.12.0.tar.gz然后直接解压tar -zxvf n…

c++函数为什么带imp_二次函数含参最值问题,老师怎么讲学生都不明白,试试这九张动图...

“一入函数深似海,从此数学是路人”很多同学都有这样的感觉。问:数学是从什么开始听不懂了?答:学函数的时候。函数问题作为中学阶段数学重要的知识点,真的是难倒了很多同学。数学老师也非常的痛苦,每次讲完函数问题&am…

解析 | 自动驾驶视觉定位与导航技术的研究与应用

来源:驭势未来视觉定位与导航技术是智能体具备的基础能力之一,随着无人驾驶的发展,基于低成本摄像头及人工智能算法的视觉定位与导航技术成为了无人驾驶的主流技术路线之一。在传统工作方式中,视觉定位与导航技术通常采用SLAM&…

c# 配置文件App.config操作类库

public class ConfigOperator{#region 从配置文件获取Value/// <summary>/// 从配置文件获取Value/// </summary>/// <param name"key">配置文件中key字符串</param>/// <returns></returns>public static string GetValueFromC…

visual studio 调试 定义debug常量_有趣的阅读 12个提高生产力的Visual Studio调试技巧...

以前因为工作的关系&#xff0c;接触过不少程序员同行&#xff0c;发现很多同学对所谓的小技巧tips感兴趣。本文就是一篇很有趣的文章&#xff0c;总结介绍了12个关于“宇宙第一IDE”—— Visual Studio的实用技巧。善加利用这些小技巧&#xff0c;能够在使用Visual Studio进行…

2016专接本c语言真题_云南特岗教师考试真题(中学信息技术)9套(无答案)

目录&#xff1a;1. 云南省2009年中央特岗计划教师招考试卷&#xff08;中学信息技术&#xff09;2. 云南省2010年中央特岗计划教师招考试卷&#xff08;中学信息技术&#xff09;3. 云南省2011年中央特岗计划教师招考试卷&#xff08;中学信息技术&#xff09;4. 云南省2013年…

淘金尖端领域:全球量子技术最新投资趋势

IBM50量子位量子计算机原型&#xff08;来源&#xff1a;IBM&#xff09;来源&#xff1a;资本实验室 作为一个少有人参与的尖端领域&#xff0c;量子技术除了在少数国家的政府部门与科研机构&#xff0c;以及科技巨头的推动之下缓慢成长&#xff0c;也正在通过越来越多的创业公…

teamviewer设备数量上限怎么解决_支小蜜刷脸支付设备解决方案,支小蜜刷脸支付设备怎么使用...

高校刷脸支付解决方案&#xff0c;用于解决高校消费场景支付需求&#xff0c;在线上通过高校人脸小程序完成学生认证&#xff0c;面容录入&#xff0c;开通刷脸支付。开通刷脸支付后&#xff0c;可以在学校内通过刷脸进行支付(校园食堂消费、校园超市消费等)。这个方案将支付宝…

字符串删除重复字符

ASCII编码对应的十进制为 0 到 127&#xff0c;对其 进行 强制类型转换后可转化为数组下标 将数组内元素初始值置为0&#xff0c;遇到一个元素第一次出现时&#xff0c;将数组内元素置为1&#xff0c;其后判断数组内元素不为0&#xff0c;则不再操作。 int myArray[128] {0}; …

[Matlab]函数表达式运算

MATLAB对函数表达式进行求和 有时候要进行函数表达式的计算 syms m; %m是符号&#xff0c;声明符号 f1exp(-im*1); f2exp(-im*2); ff1f2;%可以以符号的形式存储下来%计算% subs(f,m,1);%将f中的m替换为1&#xff0c;最好用单引号把变量括起来总结一下&#xff0c;syms用于声明…

reload vue 重新加载_vue面试,谈下router拦截

最近开始准备面试&#xff0c;尽管是电话面试全身还是充斥着紧张感&#xff0c;一面感觉还不错&#xff0c;主要是问react和vue的一些生命周期&#xff0c;介绍下redux...&#xff0c;二面印象深刻的是问到了介绍下router拦截&#xff0c;我觉得还是个人对router 的理解不够&am…

文小刚:创新就是孩子的游戏

来源&#xff1a; 返朴 撰文 | 文小刚 &#xff08;麻省理工学院终身教授、格林讲席教授&#xff09;1什么是创新应用科学&#xff08;工程技术&#xff09;的目的是利用已知的知识&#xff0c;创造社会价值&#xff0c;造福人类。而基础科学的目的是创造新知识&#xff0c;开拓…

bzoj1532: [POI2005]Kos-Dicing

1532: [POI2005]Kos-Dicing Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 1520 Solved: 516[Submit][Status][Discuss]Description Dicing 是一个两人玩的游戏,这个游戏在Byteotia非常流行. 甚至人们专门成立了这个游戏的一个俱乐部. 俱乐部的人时常在一起玩这个游戏然后评…

python搭配什么数据库_python 连接操作数据库(一)

一、下面我们所说的就是连接mysql的应用&#xff1a; 1、其实在python中连接操作mysql的模块有多个&#xff0c;在这里我只给大家演示pymysql这一个模块&#xff08;其实我是感觉它比较好用而已&#xff09;&#xff1a; pymysql是第三方的一个模块&#xff0c;需要我们自己安装…

【用word快速输入公式】希腊字母名称和大小写

用word按住alt和加号&#xff0c;先输入\ 然后后面跟代码&#xff0c;输完以后用空格转换。 输入大写就首字母大写&#xff0c;小写就首字母小写。代码基本就是发音。 大写小写发音AαAlphaBβBetaΓγGammaΔδDeltaΕεEpsilonΖζZetaΝνNuΞξXiOοOmicronΠπPiPρRhoΣ…

xadsafe做暗刷_深蓝维护通道有暗刷? - 综合技术讨论大区 - 死性不改BBS - 网维行业自由、中立的技术与信息交流平台 - Powered by Discuz!...

本帖最后由 小米 于 2018-4-27 04:52 编辑今天发现的&#xff0c;只要一打开QQ&#xff0c;C盘根目录生成NTDETECT.HTA文件&#xff0c;内容是>tpircs/<esolc.wodniw)Li(nuR.llehS005 peels.tpircsw2,Li eliFoTevaS.teGa)ydoBesnopser.tsoP(etirW.teGa)(nepO.teGa1epyT.t…

GE数字化重塑的启示:调整阵型,再战工业互联网!

来源&#xff1a;中国华能&#xff08;部分内容参考《财经》杂志韩舒淋“从GE数字化业务大调整看工业互联网未来”&#xff09;打响“工业互联网”第一枪的GE&#xff08;美国通用电气&#xff09;&#xff0c;曾是全球市值最高的工业巨头&#xff0c;如今市值却缩水至巅峰时期…

python简单图画程序_用Python的Turtple画图形

不知道各位是否还记得在小学或者初中的时候&#xff0c;我们接触过一种语言叫做logo语言&#xff0c;这个语言可以画正方形&#xff0c;画三角形&#xff0c;画圆。而用Python画图形也有点类似logo语言的意思。 在画图之前&#xff0c;我们需要启动一个模块&#xff0c;turtple…