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 相关文章推荐
JavaScript prototype对象的属性说明
Mar 13 Javascript
js null,undefined,字符串小结
Aug 21 Javascript
IE6/7/8/9不支持exec的简写方式
May 25 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
Oct 26 Javascript
轻松搞定jQuery.noConflict()
Feb 15 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
vue设置一开始进入的页面教程
Oct 28 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 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分页函数
2006/07/08 PHP
php 解析xml 的四种方法详细介绍
2016/10/26 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
jquery分页插件AmSetPager(自写)
2013/04/15 Javascript
关于Javascript与iframe的那些事儿
2013/07/04 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
2015/12/01 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
Vue-Router实现组件间跳转的三种方法
2017/11/07 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
python之yield表达式学习
2014/09/02 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
学Python 3的理由和必要性
2019/11/19 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python与pycharm有何区别
2020/07/01 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
python实现经典排序算法的示例代码
2021/02/07 Python
HTML5中图片之间的缝隙完美解决方法
2017/07/07 HTML / CSS
HTML5实现移动端复制功能
2018/04/19 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
新店开张活动方案
2014/08/24 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Java实现简易的分词器功能
2021/06/15 Java/Android
HTTP中的Content-type详解
2022/01/18 HTML / CSS