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

2019-11-19 12:35:09

字体：大中小

来源：转载

供稿：网友

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

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

效果图：