小程序中实现轮播图左向堆叠

1、效果图：

2、封装的组件：

my-swiper.wxml

<view><view class="tower-swiper" bindtouchend="TowerEnd"><view class="tower-item" wx:for="{{swiperList}}" wx:key="index" style="transform: scale(calc(0.4 + {{item.zIndex}} / 5));margin-left:calc({{item.mLeft}} * 22rpx); z-index: {{item.zIndex}};"><view class="swiper-item"><image src="{{item.url}}" mode="aspectFill" wx:if="{{item.type=='image'}}"></image></view></view></view>
</view>

my-swiper.json

{"component": true,"usingComponents": {}
}

my-swiper.wxss

.tower-swiper {width: 50rpx;position: relative;
}.tower-swiper .tower-item {position: absolute;width: 50rpx;height: 50rpx;top: 0;bottom: 0;left: 50%;margin: auto;transition: all 0.2s ease-in 0s;opacity: 1;
}.tower-swiper .tower-item .none {opacity: 0;
}
.swiper-item image {width: 50rpx;height: 50rpx;border-radius: 50%;
}

my-swiper.js

Component({/*** 组件的属性列表*/properties: {swiperList: {type: Array,value: [{id: 0,type: 'image',url: 'https://s3.cn-northwest-1.amazonaws.com.cn/amemori-s3-cn-northwest-1/ImagesFolder/6dcecb85a997478d8aa27045195633c0.png'},{id: 1,type: 'image',url: 'https://s3.cn-northwest-1.amazonaws.com.cn/amemori-s3-cn-northwest-1/ImagesFolder/5fc17d5232a84bdc9a43f72300a15ec1.png',}, {id: 2,type: 'image',url: 'https://s3.cn-northwest-1.amazonaws.com.cn/amemori-s3-cn-northwest-1/ImagesFolder/c236b580936a4af1a16d6e29ed8d2e1d.png'},// {//   id: 3,//   type: 'image',//   url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'// },// {//   id: 4,//   type: 'image',//   url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'// }, // {//   id: 5,//   type: 'image',//   url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'// }, // {//   id: 6,//   type: 'image',//   url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'// }]},towerStart: {type: Number,value: 0}},/*** 组件的初始数据*/data: {timer: null,towerStart: 0,direction: 'right'},lifetimes: {attached() {this.TowerSwiper()this.swiperOn()},detached() {clearInterval(this.data.timer); // 清除定时器}},/*** 组件的方法列表*/methods: {swiperOn() {const _this = thislet timer = this.data.timerif (!timer) {timer = setInterval(() => {_this.TowerEnd()}, 2000)this.setData({timer})}},// 初始化towerSwiperTowerSwiper() {let list = this.data.swiperList;for (let i = 0; i < list.length; i++) {// 如果是list.length/2 :当前项的zIndex 的计算方式是：轮播图总数的一半加一，再减去当前项到中间项的距离（即绝对值的差） 这样，中间项的 zIndex 最大，其他项的 zIndex 随着距离中间项的远近逐渐减小。//在这里我需要逐次向左变大，而不是中间大两遍小，所以我改成了list.length / 1list[i].zIndex = parseInt(list.length / 1) + 1 - Math.abs(i - parseInt(list.length / 1))list[i].mLeft = i - parseInt(list.length / 1)}this.setData({swiperList: list})},// towerSwiper计算滚动TowerEnd() {let direction = this.data.direction;let list = this.data.swiperList;if (direction == 'right') {let mLeft = list[0].mLeft;let zIndex = list[0].zIndex;for (let i = 1; i < this.data.swiperList.length; i++) {list[i - 1].mLeft = list[i].mLeftlist[i - 1].zIndex = list[i].zIndex}list[list.length - 1].mLeft = mLeftlist[list.length - 1].zIndex = zIndex} else {let mLeft = list[list.length - 1].mLeft;let zIndex = list[list.length - 1].zIndex;for (let i = list.length - 1; i > 0; i--) {list[i].mLeft = list[i - 1].mLeftlist[i].zIndex = list[i - 1].zIndex}list[0].mLeft = mLeft;list[0].zIndex = zIndex;}this.setData({direction,swiperList: list})},}
})

在父组件中使用：

{"usingComponents": {"mySwiper":"../component/my-swiper/my-swiper"}
}

<mySwiper swiperList="{{activeAvatars}}"></mySwiper>

结束！！！

参考文章：https://mstzf.cn/posts/mp-tower-swiper/index.html