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 相关文章推荐
brook javascript框架介绍
Oct 10 Javascript
一个简单的全屏图片上下打开显示网页效果示例
Jul 08 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
详解Javascript获取缓存和清除缓存API
May 25 Javascript
微信小程序之蓝牙的链接
Sep 26 Javascript
微信小程序实现tab页面切换功能
Jul 13 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 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学习之数据类型之间的转换介绍
2011/06/09 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
最近项目写了一些js,水平有待提高
2009/01/31 Javascript
js DOM的学习笔记
2011/12/22 Javascript
JS常用正则表达式总结
2013/11/12 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
jQuery基于json与cookie实现购物车的方法
2016/04/15 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
微信小程序如何像vue一样在动态绑定类名
2018/04/17 Javascript
vue实现百度搜索功能
2020/12/28 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
JS实现盒子拖拽效果
2020/02/06 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
python中不能连接超时的问题及解决方法
2018/06/10 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
日本最大的购物网站:日本乐天市场(Rakuten Ichiba)
2020/11/04 全球购物
个人求职简历的自我评价范文
2013/10/09 职场文书
公务员培训自我鉴定
2014/02/01 职场文书
学生会招新策划书
2014/02/14 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python