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 While 循环基础教程
Apr 05 Javascript
Js动态创建div
Sep 25 Javascript
javascript URL编码和解码使用说明
Apr 12 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
JavaScript new对象的四个过程实例浅析
Jul 31 Javascript
json数据传到前台并解析展示成列表的方法
Aug 06 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
轻松学习JavaScript函数中的 Rest 参数
May 30 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 30 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在文件指定行中写入代码的方法
2012/05/23 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
用php守护另一个php进程的例子
2015/02/13 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
JQuery 学习笔记 选择器之三
2009/07/23 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
jQuery中:lt选择器用法实例
2014/12/29 Javascript
Javascript中的apply()方法浅析
2015/03/15 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
vue监听键盘事件的快捷方法【推荐】
2018/07/11 Javascript
angular4笔记系列之内置指令小结
2018/11/09 Javascript
微信小程序实现的自定义分享功能示例
2019/02/12 Javascript
详解Vue项目引入CreateJS的方法(亲测可用)
2019/05/30 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
python中xrange用法分析
2015/04/15 Python
Python反转序列的方法实例分析
2018/03/21 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
django rest framework 自定义返回方式
2020/07/12 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
matplotlib自定义鼠标光标坐标格式的实现
2021/01/08 Python
Ootori在线按摩椅店:一家专业的按摩椅制造商
2019/04/10 全球购物
世界读书日的活动方案
2014/08/20 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书