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 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
javascript document.compatMode兼容性
Feb 23 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
js中数组的常用方法小结
Dec 30 Javascript
JavaScript中localStorage对象存储方式实例分析
Jan 12 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
使用pm2部署node生产环境的方法步骤
Mar 09 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 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
简单实用的.net DataTable导出Execl
2013/10/28 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
jquery移除button的inline onclick事件(已测试及兼容浏览器)
2013/01/25 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
再分享70+免费的jquery 图片滑块效果插件和教程
2014/12/15 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
纯jQuery实现前端分页功能
2017/03/23 jQuery
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
Vue2.x Todo之自定义指令实现自动聚焦的方法
2019/01/08 Javascript
微信小程序自定义顶部组件customHeader的示例代码
2020/06/03 Javascript
python中对list去重的多种方法
2014/09/18 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
python 5个顶级异步框架推荐
2020/09/09 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
CSS3属性选择符介绍
2008/10/17 HTML / CSS
国际领先的学术出版商:Springer
2017/01/11 全球购物
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
几道Web/Ajax的面试题
2016/11/05 面试题
法学专业毕业生自荐信范文
2013/12/18 职场文书
大学生自我鉴定书
2014/03/24 职场文书
应届生找工作求职信
2014/06/24 职场文书
文秘应届生求职信
2014/07/05 职场文书
户籍证明模板
2014/09/28 职场文书
昆虫记读书笔记
2015/06/26 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
如何写好活动总结
2019/06/21 职场文书
golang中实现给gif、png、jpeg图片添加文字水印
2021/04/26 Golang
MySQL 分页查询的优化技巧
2021/05/12 MySQL