微信小程序使用swiper组件实现层叠轮播图

本文实例为大家分享了微信小程序实现层叠轮播图的具体代码，供大家参考，具体内容如下

wxml:

<view class="banner-swiper">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' 
indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" circular='{{circular}}' 
previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}" bindchange="swiperChange" >
    <block wx:for="{{arr}}" wx:key="key"> 
     <swiper-item>
      <image src="{{item.images}}" class="slide-image{{index == swiperCurrent ? ' active' : ''}}" 
bindchange="chuangEvent" id="{{index}}"></image>
     </swiper-item>
    </block> 
  </swiper>
 </view> 

wxss:

.banner-swiper {
 width: 100%;
 height: 500rpx;
 overflow: hidden;
}

swiper {
 display: block;
 height: 500rpx;
 position: relative;
}

.slide-image {
 width: 96%;
 display: block;
 margin: 0 auto;
 height: 450rpx;
 margin-top:25rpx;
}
.active{
 margin-top:0rpx;
 height: 500rpx;
}

js:

Page({
 data: {
  //轮播图
  swiperCurrent:1,
  arr: [{
   images: 'images/1.jpg'
  },
  {
   images: 'images/5.jpg'
  },
  {
   images: 'images/3.jpg'
  },
  {
   images: 'images/4.jpg'
  }
  ]
  indicatorDots: true,
  autoplay: true,
  interval: 2000,
  duration: 1000,
  circular: true,
  beforeColor: "white",//指示点颜色 
  afterColor: "coral",//当前选中的指示点颜色 
  previousmargin:'30px',//前边距
  nextmargin:'30px',//后边距
  
 },
 
 //轮播图的切换事件 
 swiperChange: function (e) {
  console.log(e.detail.current);
  this.setData({
   swiperCurrent: e.detail.current  //获取当前轮播图片的下标
  })
 },
 //滑动图片切换 
 chuangEvent: function (e) { 
  this.setData({
   swiperCurrent: e.currentTarget.id
  })
 },
})

效果图：

本文微信小程序使用swiper组件实现层叠轮播图到此结束。上游，是勇士劈风破浪的终点；下游，是懦夫一帆风顺的归宿。小编再次感谢大家对我们的支持！