基于vue实现swipe轮播组件实例代码

项目背景

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

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

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

当当当当~~~

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

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

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

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

Result

Usage

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

<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></a></div>
<div><a href=""><img src=" rel="external nofollow" rel="external nofollow" rel="external nofollow" "/></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>

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

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

相关推荐

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

但是这个有一些问题,

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

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

# vue # swipe # 组件 # vue轮播组件 # 轮播图组件 # 解决vue使用vant轮播组件swipe + flex时文字抖动问题 # Vue实现图片轮播组件思路及实例解析 # vue轮播组件实现$children和$parent 附带好用的gif录制工具 # vue移动端轻量级的轮播组件实现代码 # 基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能 # 使用Vue制作图片轮播组件思路详解 # 利用Vue实现移动端图片轮播组件的方法实例 # 基于vue.js轮播组件vue-awesome-swiper实现轮播图 # Vue实现可复用轮播组件的方法 # 分页 # 大材小用 # 很好 # 放在 # 你是 # 有很多 # 就不 # 很简单 # 见了 # 这样一个 # 就是我 # 只需要 # 易用 # 必有 # 跳到 # 其所 # 绑定 # 需要注意 # 大家多多 # 如下图

返回目录在线咨询

上一篇：php怎么获取源码_php获取源码渠道与安全方法
下一篇：虚拟共享主机建站：如何提升网站加载速度和优化用户体验？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

基于vue实现swipe轮播组件实例代码

您的项目需求