基于vue如何实现swipe分页组件-创新互联

小编给大家分享一下基于vue如何实现swipe分页组件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

创新互联专业为企业提供海伦网站建设、海伦做网站、海伦网站设计、海伦网站制作等企业网站建设、网页设计与制作、海伦企业网站模板建站服务，十年海伦做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

Vue的优点

Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势，Vue中页面使用的是局部刷新，不用每次跳转页面都要请求所有数据和dom，可以大大提升访问速度和用户体验。

项目背景

图片轮播是前端项目必有项，当前有很多效果很酷炫的轮播插件，例如 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

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

没有定制，必须在代码里写的话，也是可以的，造一个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块

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

大橙子网站建设，新征程启航

基于vue如何实现swipe分页组件-创新互联

Vue的优点

其他资讯