java代码实现消息栏轮播,基于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://www.baidu.com",

imgSrc:""

},{

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

imgSrc:""

},{

href:"http://www.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: rehttp://www.cppcns.comquire('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.http://www.cppcns.comslide(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: "";

displ

相关推荐

目前基于vue有一个vue-swipe组件,亲测轻量简单易用,基本功能齐全,是做swipe轮播图很好的选择

但是这个有一些问题,

如果样式放在scoped中,底部小圈圈就不见了~所以,这个的样式使用需要注意样式污染问题.

IE9下没有滑动效果，主要是ie9对css3动画的不兼容

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

本文标题: 基于vue实现swipe轮播组件实例代码

本文地址: http://www.cppcns.com/ruanjian/java/192021.html