基于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://www.baidu.com",imgSrc:"" },{ href:"http://www.baidu.com",imgSrc:"" }] },components: { 'swipe-module': require('pagination-swipe'),},

在html中绑定该数据

pagination-swipe组件内容

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

vue构造组件

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

相关推荐

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

但是这个有一些问题,

  1. 如果样式放在scoped中,底部小圈圈就不见了~所以,这个的样式使用需要注意样式污染问题.
  2. IE9下没有滑动效果,主要是ie9对css3动画的不兼容

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章