剑客
关注科技互联网

基于vue实现swipe分页组件

项目背景

图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如 Swiper

但是当我们项目中的图片轮播只需要一个很简单的轮播样式,比如这样的
基于vue实现swipe分页组件

我们引用这样一个 110k 的大插件,就大材小用了。再安利一下,swiper2.x和swiper3.x对移动和PC端支持情况如下图

基于vue实现swipe分页组件

当当当当~~~

我们今天的主角登场了, thebird/Swipe ,这个插件完成了图片轮播需要的基本功能,只有 14.2k ,真真的 轻量级 啊。还有,还有

基于vue实现swipe分页组件

翻译一下,就是俺们全支持,不管你是PC端(IE7+)还是移动端浏览器。此处应该有掌声,哈哈~

简而言之,就是当需要一个简单的轮播时,可以选用 thebird/Swipe ,自己写一个组件。

举个栗子,就是我实现的这个—— 基于 vue 实现swipe分页组件 ,移动端和PC端均适用哦。

Result

基于vue实现swipe分页组件

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>
//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;
    }
}
分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址