溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
項目背景
圖片輪播是前端項目必有項，當前有很多效果很酷炫的輪播插件，例如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;
}
}
相關推薦
目前基于vue有一個vue-swipe組件,親測輕量簡單易用,基本功能齊全,是做swipe輪播圖很好的選擇
但是這個有一些問題,
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
