不要沮丧，不必惊慌，做努力爬的蜗牛或坚持飞的笨鸟，我们试着长大，一路跌跌撞撞，然后遍体鳞伤。坚持着，总有一天，你会站在最亮的地方，活成自己曾经渴望的模样。
本文实例为大家分享了微信小程序实现层叠轮播图的具体代码，供大家参考，具体内容如下
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组件实现层叠轮播图到此结束。上游，是勇士劈风破浪的终点；下游，是懦夫一帆风顺的归宿。小编再次感谢大家对我们的支持！
