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实现多域名不同文件的调用方法
Jan 12 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形菜单
Nov 30 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
ionic2 tabs使用 Modal底部tab弹出框
Dec 30 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
Javascript实现信息滚动效果
May 18 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
Servlet返回的数据js解析2种方法
Dec 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
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
actionscript与javascript的区别
2011/05/25 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
基于jquery步骤进度条源码分享
2015/11/12 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
2016/02/16 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
简单介绍Python中的readline()方法的使用
2015/05/24 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
基于Python os模块常用命令介绍
2017/11/03 Python
python实现类之间的方法互相调用
2018/04/29 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python+selenium打印当前页面的titl和url方法
2018/06/22 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
阿波罗盒子:Apollo Box
2017/08/14 全球购物
机电专业毕业生推荐信
2013/11/10 职场文书
电子商务应届生自我鉴定
2014/01/13 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
行政监察建议书
2014/05/19 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
新郎答谢词
2015/01/04 职场文书
2015年物资管理工作总结
2015/05/20 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
2016习总书记系列重要讲话心得体会
2016/01/15 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS