基于vue實(shí)現(xiàn)swipe輪播組件實(shí)例代碼

更新時(shí)間：2017年05月24日 17:11:05 作者：louisanikita

本篇文章主要介紹了基于vue實(shí)現(xiàn)swipe輪播組件實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

項(xiàng)目背景

圖片輪播是前端項(xiàng)目必有項(xiàng)，當(dāng)前有很多效果很酷炫的輪播插件，例如Swiper。

但是當(dāng)項(xiàng)目中的圖片輪播只需要一個(gè)很簡(jiǎn)單的輪播樣式，比如這樣的

我們引用這樣一個(gè)110k的大插件，就大材小用了。再安利一下，swiper2.x和swiper3.x對(duì)移動(dòng)和PC端支持情況如下圖

當(dāng)當(dāng)當(dāng)當(dāng)~~~

我們今天的主角登場(chǎng)了，thebird/Swipe，這個(gè)插件完成了圖片輪播需要的基本功能，只有14.2k,真真的輕量級(jí) 啊。還有，還有

翻譯一下，就是俺們?nèi)С郑还苣闶荘C端（IE7+）還是移動(dòng)端瀏覽器。此處應(yīng)該有掌聲，哈哈~

簡(jiǎn)而言之，就是當(dāng)需要一個(gè)簡(jiǎn)單的輪播時(shí)，可以選用thebird/Swipe，自己寫一個(gè)組件。

舉個(gè)栗子，就是我實(shí)現(xiàn)的這個(gè)—— 基于vue實(shí)現(xiàn)swipe分頁(yè)組件，移動(dòng)端和PC端均適用哦。

Result

Usage

一般情況，輪播圖片因?yàn)槭且?jīng)常換的，故在后臺(tái)定制，定制內(nèi)容如下

<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>

沒(méi)有定制，必須在代碼里寫的話，也是可以的，造一個(gè)data數(shù)組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中綁定該數(shù)據(jù)

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

pagination-swipe組件內(nèi)容

按照swipe構(gòu)造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>
  <!-- 分頁(yè) -->
  <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構(gòu)造組件

//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;
    //獲取子組件中分頁(yè)小圈圈
    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) {
        //渲染分頁(yè)小圈圈
        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: {
    //點(diǎn)擊底部小圈圈，跳到其所對(duì)應(yīng)頁(yè)
    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;
  }
}

相關(guān)推薦

目前基于vue有一個(gè)vue-swipe組件,親測(cè)輕量簡(jiǎn)單易用,基本功能齊全,是做swipe輪播圖很好的選擇

但是這個(gè)有一些問(wèn)題,