• 首页 Home
• 服务 Service
• 案例 Case
• 关于 About
• 新闻 News
• 联系 Contact

Tel：028-86922220 我有需求

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

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

以上是“基于vue如何实现swipe分页组件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！

另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。