vue中引用swiper轮播插件的教程详解


Posted in Javascript onAugust 16, 2018

有时候我们需要在vue中使用轮播组件,如果是在vue组件中引入第三方组件的话,最好通过npm安装,从而进行统一安装包管理。

申明:本文所使用的是vue.2x版本。

通过npm安装插件:

 npm install swiper --save-dev

在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里

Slider.vue源码:

<template>
 <div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide"><img src="../fixtures/sliders/t1.svg"/></div>
 <div class="swiper-slide"><img src="../fixtures/sliders/t2.svg"/></div>
 <div class="swiper-slide">Slide 3</div>
 </div>
 <!-- 如果需要分页器 -->
 <div class="swiper-pagination"></div>
 <!-- 如果需要导航按钮 -->
 <!--<div class="swiper-button-prev"></div>-->
 <!--<div class="swiper-button-next"></div>-->
 <!-- 如果需要滚动条 -->
 <!--<div class="swiper-scrollbar"></div>-->
 </div>
</template>
<script>
 import 'swiper/dist/css/swiper.css'
 import Swiper from 'swiper';
 export default {
 name: "Slider",
 mounted(){
 new Swiper ('.swiper-container', {
 loop: true,
 // 如果需要分页器
 pagination: '.swiper-pagination',
 // 如果需要前进后退按钮
 nextButton: '.swiper-button-next',
 prevButton: '.swiper-button-prev',
 // 如果需要滚动条
 scrollbar: '.swiper-scrollbar',
 })
 }
 }
</script>
<style scoped>
 .swiper-container {
 width: 100%;
 margin: 0;
 padding: 0;
 }
 .swiper-wrapper {
 height: 200px;
 }
 .swiper-slide img {
 max-width: 100%;
 }
 .swiper-slide {
 text-align: center;
 background: #fff;
 /* Center slide text vertically */
 display: -webkit-box;
 display: -ms-flexbox;
 display: -webkit-flex;
 display: flex;
 -webkit-box-pack: center;
 -ms-flex-pack: center;
 -webkit-justify-content: center;
 justify-content: center;
 -webkit-box-align: center;
 -ms-flex-align: center;
 -webkit-align-items: center;
 align-items: center;
 }
</style>

运行效果:

vue中引用swiper轮播插件的教程详解

接下来,我们对上面的代码进行重构,因为如果我们用 css 选择器作为 Swiper 定位页面上元素依据的话,假如在一个页面上同时有两个.slider-container,那么这个组件就会乱套 !我们要秉承着低耦合的开发方式来重构我们的代码。

我们可以使用Vue提供的更精确的指明方式在元素中添加ref熟悉,然后在代码内通过 this.$refs.引用名来引用。

这是Vue.js2.0后的编号,ref标记是标准的HTML属性,它取代了Vue.js 1.x中v-ref的写法

需要注意的是,如果改为动态绑定图片,请参考:vue-cil和webpack中本地静态图片的路径问题解决方案

我这里将静态资源文件转移到了static目录下面。

重构后的代码如下:

<template>
 <div>
 <div class="swiper-container" ref="slider">
 <div class="swiper-wrapper">
 <div class="swiper-slide" v-for="slide in slides">
 <router-link :to="{name:'BookDetail',params:{id:slide.id}}">
 <img :src="slide.img_url"/>
 </router-link>
 </div>
 </div>
 </div>
 </div>
</template>
<script>
 import 'swiper/dist/css/swiper.css'
 import Swiper from 'swiper'
 export default {
 name: "Slider",
 data(){
 return{
 slides:[{id:1,img_url:'./static/sliders/t1.svg'},{id:2,img_url:'./static/sliders/t2.svg'}]
 }
 },
 mounted(){
 new Swiper (this.$refs.slider, {
 loop: true,
 // 如果需要分页器
 pagination: '.swiper-pagination',
 // 如果需要前进后退按钮
 nextButton: '.swiper-button-next',
 prevButton: '.swiper-button-prev',
 // 如果需要滚动条
 scrollbar: '.swiper-scrollbar',
 })
 }
 }
</script>

这里还没有把组件完全独立,里面有数据定义,其实可以把这个数据作为一个参数传递进来,也就是组件之间数据传递。

Vue页面跳转传参

通过路由传参,在router/index.js中定义路由

export default new Router({
 routes: [
 {
 name:'BookDetail',
 path:'/books/:id',
 component: BookDetail
 }
 ]
})

前面的轮播组件中已经定义了需要传递的路由参数

<router-link :to="{name:'BookDetail',params:{id:slide.id}}">
 <img :src="slide.img_url"/>
 </router-link>

参数接收界面BookDetail.vue

<template>
<div>
 点击的是:<span v-text="id"></span>
</div>
</template>
<script>
 export default {
 name: "BookDetail",
 data(){
 return{
  id:this.$route.params.id
 }
 },
 props:[]
 }
</script>
<style scoped>
</style>

如果传递参数太多,这样的方式肯定不方便,那么可以采用vuex,或者组件数据传递。

关于组件传值可以参考:Vue 组件之间传值

总结

以上所述是小编给大家介绍的vue中引用swiper轮播插件的教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 内存释放问题
Apr 25 Javascript
jquery的flexigrid无法显示数据提示获取到数据
Jul 19 Javascript
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
百度地图自定义控件分享
Mar 04 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
详解react-native-fs插件的使用以及遇到的坑
Sep 12 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 #Javascript
JS加密插件CryptoJS实现AES加密操作示例
Aug 16 #Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 #Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 #Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 #Javascript
JS实现的RC4加密算法示例
Aug 16 #Javascript
vue2.0父子组件间传递数据的方法
Aug 16 #Javascript
You might like
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
yii2实现Ueditor百度编辑器的示例代码
2018/11/02 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
2015/04/25 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
2019/03/06 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
2019/09/20 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
python 提取文件的小程序
2009/07/29 Python
Python的函数的一些高阶特性
2015/04/27 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Django 2.0版本的新特性抢先看!
2018/01/05 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
全球领先的各类汽车配件零售商:Advance Auto Parts
2016/08/26 全球购物
GUESS德国官网:美国牛仔服装品牌
2017/02/14 全球购物
英国著名书店:Foyles
2018/12/01 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
加拿大著名的奢侈品购物网站:SSENSE(支持中文)
2020/06/25 全球购物
介绍一下游标
2012/01/10 面试题
实习单位推荐信范文
2013/11/27 职场文书
财务主管的岗位职责
2013/12/30 职场文书
库房管理员岗位职责
2014/03/09 职场文书
电子工程求职信
2014/07/17 职场文书
后勤工作个人总结
2015/02/28 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
Python OpenCV 彩色与灰度图像的转换实现
2021/06/05 Python
详解Python内置模块Collections
2022/03/22 Python
详解Python flask的前后端交互
2022/03/31 Python