基于vue实现swipe分页组件实例

项目背景

图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如 Swiper 。

但是当我们项目中的图片轮播只需要一个很简单的轮播样式，比如这样的

我们引用这样一个 110k 的大插件，就大材小用了。再安利一下，swiper2.x和swiper3.x对移动和PC端支持情况如下图

当当当当~~~

我们今天的主角登场了， thebird/Swipe ，这个插件完成了图片轮播需要的基本功能，只有 14.2k ,真真的 轻量级 啊。还有，还有

翻译一下，就是俺们全支持，不管你是PC端（IE7+）还是移动端浏览器。此处应该有掌声，哈哈~

简而言之，就是当需要一个简单的轮播时，可以选用 thebird/Swipe ，自己写一个组件。

举个栗子，就是我实现的这个—— 基于 vue 实现swipe分页组件 ，移动端和PC端均适用哦。

Result

Usage

一般情况，轮播图片因为是要经常换的，故在后台定制，定制内容如下

<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>

没有定制，必须在代码里写的话，也是可以的，造一个data数组swipeInfo

<!--js-->
data：{
 swipeInfo:[{
   href:"http://www.baidu.com",
   imgSrc:""
 },{
   href:"http://www.baidu.com",
   imgSrc:""
 },{
   href:"http://www.baidu.com",
   imgSrc:""
 }]
},
components: {
 'swipe-module': require('pagination-swipe'),
},

在html中绑定该数据

<!--html-->
<swipe-module :swipeinfo="swipeInfo"></swipe-module>

pagination-swipe组件内容

按照swipe构造html框架，添加了pagination块

<!--template.html-->
<div v-el:swipe class='swipe bar-slider'>
 <div class='swipe-wrap'>
   <div v-for="item in swipeinfo"><a :href=item.href><img :src=item.imgSrc /></a></div>
 </div>
 <!-- 分页 -->
 <div class="pagination">
   <span class="swipe-pagination-switch swipe-active-switch" @click="slideToCur(0)"></span>
   <span class="swipe-pagination-switch" @click="slideToCur($index+1)" v-for="item in slideNum"></span>
 </div>
</div>

vue构造组件

//index.js
require('./style.less');
var Swipe = require('swipe');

Vue.component('pagination-swipe',{
 props: ['swipeinfo'],
 template: require('raw!./template.html'),
 data: function() {
   return {
     mySwipe: {},
     slideNum: {},
   };
 },
 ready: function() {
   var self = this;
   //获取子组件中分页小圈圈
   var slides = self.$els.swipe.getElementsByClassName('swipe-pagination-switch');
   self.mySwipe = new Swipe(self.$els.swipe, {
     startSlide: 0,
     continuous: true,
     speed: 1000,
     auto: 4000,
     stopPropagation: false,
     callback: function(index, elem) {
       //渲染分页小圈圈
       for (var i = 0; i < slides.length; i++) {
         if (i != index) {
           slides[i].style.opacity = "0.2";
           slides[i].style.background = "#000";
         } else {
           slides[index].style.opacity = "1";
           slides[index].style.background = "#ee3a4a";
         }
       }
     },
   });
   self.slideNum = self.mySwipe.getNumSlides() - 1;
 },
 methods: {
   //点击底部小圈圈，跳到其所对应页
   slideToCur: function(index) {
     var self = this;
     self.mySwipe.slide(index, 300);
   },
 }
});

<!--style.less-->
.swipe {
 overflow: hidden;
 visibility: hidden;
 position: relative;
 height: 200/@rem;
 .swipe-wrap {
   position: relative;
   overflow: hidden;
   height: 100％;
   div {
     float: left;
     width: 100％;
     position: relative;
     margin: 0;
     a {
       width: 100％;
       height: 100％;
       background-position: center 0;
       background-repeat: no-repeat;
       background-color: transparent;
       display: block;
       img {
         width: 100％;
         height: 100％;
       }
     }
   }
 }
 .pagination {
   text-align: center;
   position: relative;
   bottom: 40/@rem;
   cursor: pointer;
 }
 .swipe-pagination-switch {
   content: "";
   display: inline-block;
   width: 8px;
   height: 8px;
   border-radius: 100％;
   background: #000;
   opacity: 0.2;
   margin: 0 8px;
   z-index: 10;
   &:first-child {
     background: #ee3a4a;
   }
 }
 .swipe-active-switch {
   opacity: 1;
 }
}

来源：https://segmentfault.com/a/1190000007299024?utm_source=tuicool&utm_medium=referral