微信小程序实现堆叠轮播图组件_微信小程序 swiper 层叠

效果如下

Component

.wxml

<swiper class="swiper_box" circular autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" previous-margin="{{length}}" next-margin="{{length}}" bindchange="bindchange">
  <block wx:for="{{bannerList}}" wx:key="index">
    <swiper-item>
      <image class="swiper_item {{current === index ? 'active' :''}}" src="{{item.url}}" mode="aspectFill"></image>
    </swiper-item>
  </block>
</swiper>
1
2
3
4
5
6
7

.js

Component({
  properties: {
    bannerList: {
      type: Array,
      value: [],
    },
  },
  data: {
    autoplay: true, //自动切换
    interval: 1500, //自动切换间隔
    duration: 500, //滑动动画时长
    current: 0, //当前图片下标
    length: '70rpx' //边距
  },
  methods: {
    // 滑动banner
    bindchange(e) {
      this.setData({
        current: e.detail.current
      })
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.wxss

.swiper_box {
	height: 322rpx;
}

.swiper_box swiper-item {
	display: flex;
	justify-content: center;
	align-items: center;
}

.swiper_item {
	width: 90%;
	height: 90%;
	border-radius: 20rpx;
}

.swiper_item.active {
	width: 100%;
	height: 100%;
	transition: all .2s ease-in 0s;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

在页面引用组件(Page)

.json

{
  "usingComponents": {
    "stack-banner": "/components/stack-banner/stackBanner"
  }
}
1
2
3
4
5

.wxml

<view class="container">
  <stack-banner bannerList="{{bannerList}}" />
</view>
1
2
3