項目背景
圖片輪播是前端項目必有項，當前有很多效果很酷炫的輪播插件，例如 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; }}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
