基于vue实现swipe分页组件实例

基于vue实现swipe分页组件实例

项目背景

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

但是当我们项目中的图片轮播只需要一个很简单的轮播样式，比如这样的

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

当当当当~~~

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

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

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

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

Result

Usage

一般情况，轮播图片因为是要经常换的，故在后台定制，定制内容如下

没有定制，必须在代码里写的话，也是可以的，造一个data数组swipeInfo

data：{

swipeInfo:[{

href:"http://baidu.com",

imgSrc:""

},{

href:"http://baidu.com",

imgSrc:""

},{

href:"http://baidu.com",

imgSrc:""

}]

},

components: {

'swipe-module': require('pagination-swipe'),

},

在html中绑定该数据

pagination-swipe组件内容

按照swipe构造html框架，添加了pagination块

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);

},

}

});

.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;

}

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。