基於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=""/></a></div>
<div><a href=""><img src=""/></a></div>
<div><a href=""><img src=""/></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輪播圖很好的選擇

可是這個有一些問題,

1. 若是樣式放在scoped中,底部小圈圈就不見了~因此,這個的樣式使用須要注意樣式污染問題.

2. IE9下沒有滑動效果，主要是ie9對css3動畫的不兼容