Vue封装Swiper实现图片轮播效果


Posted in Javascript onFebruary 06, 2018

图片轮播是前端中经常需要实现的一个功能。最近学习Vue.js,就针对Swiper进行封装,实现一个简单的图片轮播组件。

一、Swiper

在实现封装之前,先介绍一下Swiper。

  • Swiper是纯Javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。
  • Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
  • Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择。

Swiper的应用场景广泛,实现效果很好,下面个这实际案例就是Swiper的典型应用场景。

Vue封装Swiper实现图片轮播效果 

Swiper的具体使用教程及详细API,参考 Swiper中文网

二、Vue组件

Vue组件设计初衷就是要配合使用的,提高维护性和复用性。而图片轮播正适合使用组件来完成,因此在介绍具体的实现之前,先介绍下关于Vue组件及组件通信。

Vue组件中最常见的就是形成父子组件的关系:组件 A 在它的模板中使用了组件 B。

它们之间必然需要相互通信:父组件可能要给子组件下发数据,子组件则可能要将它内部发生的事情告知父组件。然而,通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解,从而提高了其可维护性和复用性。

在 Vue 中,父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息。

Vue封装Swiper实现图片轮播效果 

三、封装实现

1.引入Swiper

首先,需要安装Swiper。

npm install --save swiper

然后,要引用两个文件。

import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

2.HTML代码

在模板中设置轮播图的html布局。

<template>
 <div class="swiper-container" :class="swipeid">
  <div class="swiper-wrapper">
   <!-- 存放具体的轮播内容 -->
   <slot name ="swiper-con"></slot>
  </div>
  <!-- 分页器 -->
  <div :class="{'swiper-pagination':pagination}"></div>
 </div>
</template>

其中使用具名插槽,提高解耦,使得在父组件使用时,根据不同情况,设置不同的轮播内容。

另外需要设置分页器,即图片轮播中的页面指示器,常见的如小圆点,或者数字指示器。

3.初始化Swiper

既然是对Swiper进行封装实现轮播图,前面也已经安装了Swiper,那么现在就需要初始化使用。

在初始化之前,根据Swiper用法的了解,先确定轮播组件需要的属性信息,然后通过父组件传递给封装的Swiper组件。

这时候就需要用到props。

props: {
 swipeid: {
  type: String,
  default: ""
 },
 effect: {
  type: String,
  default: "slide"
 },
 loop: {
  type: Boolean,
  default: false
 },
 direction: {
  type: String,
  default: "horizontal"
 },
 pagination: {
  type: Boolean,
  default: true
 },
 paginationType: {
  type: String,
  default: "bullets"
 },
 autoPlay: {
  type: Number,
  default: 3000
 }
 }

下面逐一解释每个属性的含义。

属性 含义
swiped 轮播容器class属性的类名。
effect 图片的 切换效果,默认为"slide",还可设置为"fade", "cube", "coverflow","flip",详情见effect。
loop 设置为true 则开启loop模式。loop模式:会在原本图片前后复制若干个图片并在合适的时候切换,让Swiper看起来是循环的,详情见loop。
direction 图片的滑动方向,可设置水平(horizontal)或垂直(vertical),详情见direction。
pagination 使用分页导航,详情见pagination。
paginationType 分页器样式类型,可设置为"bullets", "fraction", "progressbar", "custom",详情见type。
autoPlay 设置为true启动自动切换,并使用默认的切换设置,详情见autoplay。

了解了上面每个属性的含义,下面就可以初始化Swiper,并设置具体的属性。

初始化Swiper时,需要传入两个参数。

  • 轮播容器的类名
  • 代表图片轮播组件详细功能的对象
var that = this;
 this.dom = new Swiper("." + that.swipeid, {
  //循环
  loop: that.loop,
  //分页器
  pagination: { 
  el: ".swiper-pagination",
  bulletClass : 'swiper-pagination-bullet',
   },
  //分页类型
  paginationType: that.paginationType,
  //自动播放
  autoPlay: that.autoPlay,
  //方向
  direction: that.direction,
  //特效
  effect: that.effect,
  //用户操作swiper之后,不禁止autoplay
  disableOnInteraction: false,
  //修改swiper自己或子元素时,自动初始化swiper
  observer: true,
  //修改swiper的父元素时,自动初始化swiper
  observeParents: true
 });
 }

四、自定义轮播效果

经过上面的步骤,轮播器就封装好了。我们可以自定义实现自己想要的轮播器效果。下面以知乎的API为例,实现图片轮播。

1.HTML代码

<m-swipe swipeid="swipe" ref="swiper" :autoPlay="3000" effect="slide">
  <div v-for="top in tops" :key="top.id" class="swiper-slide" slot="swiper-con" >
  <img :src="top.image">
  <h3>{{top.title}}</h3>
  </div>
</m-swipe>

首先要引用注册组件,这里就不详细写出。

其中 m-swipe 就是前面实现的图片轮播组件,而其中的子组件就是通过具名插槽插入的轮播内容。

2.CSS代码

.swiper-container {
 width: 100%;
 }
 .swiper-slide {
 height: 8rem;
 overflow: hidden;
 position: relative;
 }
.swiper-slide {
 div {
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0.4;
 position: absolute;
 background-color: @blue;
 }
 img {
 top: 50%;
 position: relative;
 transform: translate(0, -50%);
 }
 h3 {
 width: 70%;
 color: #fff;
 margin: 0;
 font-size: 0.5rem;
 line-height: 1rem;
 right: 5%;
 bottom: 2.6rem;
 text-align: right;
 position: absolute;
 text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
 &:before {
  content: "";
  width: 3rem;
  bottom: -0.6rem;
  right: 0;
  display: block;
  position: absolute;
  border: 2px solid @yellow;
 }
 }
}
.swiper-pagination-bullet-active {
 background: #fff;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
 bottom: 1rem;
 width: 95%;
 text-align: right;
 }

其中 swiper-pagination-bullet-active 代表分页器中当前指示的小圆点的类名。 .swiper-pagination-bullets 代表分页器的类名,详情见pagination分页器内元素的类名 。

关于网络请求数据展示的代码就不贴了,下面有源码地址。

3.效果

Vue封装Swiper实现图片轮播效果 

这只是一个简单的封装效果,想要实现更多的效果,可以通过Swiper中提供的更多功能来实现。

Github地址: 图片轮播

总结

以上所述是小编给大家介绍的Vue封装Swiper实现图片轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
JS解析XML实例分析
Jan 30 Javascript
JS继承用法实例分析
Feb 05 Javascript
AngularJS的内置过滤器详解
May 14 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
浅谈FastClick 填坑及源码解析
Mar 02 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
Nov 21 Javascript
vue百度地图 + 定位的详解
May 13 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
vue中如何使用ztree
Feb 06 #Javascript
javascript回调函数详解
Feb 06 #Javascript
原生JS实现瀑布流插件
Feb 06 #Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 #Javascript
20行JS代码实现粘贴板复制功能
Feb 06 #Javascript
JS中offset和匀速动画详解
Feb 06 #Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 #Javascript
You might like
php中json_encode UTF-8中文乱码的更好解决方法
2014/09/28 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
js中iframe调用父页面的方法
2014/10/30 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
莱鸟介绍javascript onclick事件
2016/01/06 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
详细谈谈javascript的对象
2016/07/31 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
2016/12/28 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
jQuery 利用ztree实现树形表格的实例代码
2017/09/27 jQuery
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
JavaScript实现简易聊天对话框(加滚动条)
2020/02/10 Javascript
Vue 组件复用多次自定义参数操作
2020/07/27 Javascript
python dataframe astype 字段类型转换方法
2018/04/11 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python SQLAlchemy 中的Engine详解
2019/07/04 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
opencv python图像梯度实例详解
2020/02/04 Python
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
小学生自我鉴定
2013/10/12 职场文书
个人求职信范文分享
2013/12/13 职场文书
机关财务管理制度
2014/01/17 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
社区工作感言
2014/02/21 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
经典禁毒标语
2014/06/16 职场文书
高中同学会活动方案
2014/08/14 职场文书
怎样写离婚协议书
2014/09/10 职场文书
答谢词范文
2015/01/05 职场文书