基于vue實現swipe輪播組件實例代碼

2019-11-19 16:30:01

字體：大中小

來源：轉載

供稿：網友

項目背景

圖片輪播是前端項目必有項，當前有很多效果很酷炫的輪播插件，例如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.jsrequire('./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;  }}

相關推薦

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

但是這個有一些問題,