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 相关文章推荐
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
js确定对象类型方法
Mar 30 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
jquery制作LED 时钟特效
Feb 01 Javascript
javascript每日必学之条件分支
Feb 17 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
Dec 08 Javascript
百度地图去掉marker覆盖物或者去掉maker的label文字方法
Jan 26 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
Sep 23 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获取当前网址url并替换参数或网址的方法
2010/06/06 PHP
php中配置文件操作 如config.php文件的读取修改等操作
2012/07/07 PHP
php格式化电话号码的方法
2015/04/24 PHP
javascript 精粹笔记
2010/05/09 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
微信JSSDK调用微信扫一扫功能的方法
2017/07/25 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
vue实现移动端省市区选择
2019/09/27 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
python skimage 连通性区域检测方法
2018/06/21 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
python 安装库几种方法之cmd,anaconda,pycharm详解
2020/04/08 Python
python 绘制国旗的示例
2020/09/27 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
英国绿色商店:Natural Collection
2019/05/03 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
四风问题查摆材料
2014/08/25 职场文书
2014年纠风工作总结
2014/12/08 职场文书
离婚协议书怎么写
2015/01/26 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
python中pandas对多列进行分组统计的实现
2021/06/18 Python