今日分享【微信小程序实现堆叠式轮播图】
1、先看效果
2、来看具体实现代码
- wxml
<view class="swiper-box-1" bindtouchmove="tauchMove" bindtouchstart="tauchStart" bindtouchend="tauchEnd">
<view class="item-box-1 {{item.zIndex==1?'none':''}}" wx:for="{{swiperList}}" wx:key="index" style="--index:{{item.zIndex}};--left:{{item.mLeft}}">
<view class="swiper-item">
<image src="{{item.url}}" mode="aspectFill"></image>
</view>
</view>
</view>
- wxss
.swiper-item image{
width: 100%;
display: block;
height: 100%;
margin: 0;
pointer-events: none;
}
image {
max-width: 100%;
display: inline-block;
position: relative;
z-index: 0;
}
.swiper-box-1 {
height: 420rpx;
position: relative;
max-width: 750rpx;
overflow: hidden;
box-sizing: border-box;
margin-top: 90rpx;
}
.swiper-box-1 .item-box-1 {
position: absolute;
width: 300rpx;
height: 380rpx;
top: 0;
bottom: 0;
left: 50%;
margin: auto;
transition: all 0.2s ease-in 0s;
opacity: 1;
box-shadow: 0px 13rpx 12rpx rgba(0, 0, 0, .5);
border-radius: 15rpx;
overflow: hidden;
}
.swiper-box-1 .item-box-1.none {
opacity: 0;
}
.swiper-box-1 .item-box-1 .swiper-item {
width: 100%;
height: 100%;
border-radius: 6rpx;
overflow: hidden;
}
.swiper-box-1 .item-box-1 {
transform: scale(calc(0.5 + var(--index) / 10));
margin-left: calc(var(--left) * 100rpx - 150rpx);
z-index: var(--index);
}
- js
Page({
data: {
swiperList: [
{
type: 'image',
url: 'https://s21.ax1x.com/2024/04/29/pkFAvTO.jpg'
},
{
type: 'image',
url: 'https://s21.ax1x.com/2024/04/29/pkFAvTO.jpg'
},
{
type: 'image',
url: 'https://s21.ax1x.com/2024/04/29/pkFAvTO.jpg'
},
],
},
onLoad: function (options) {
this.tauchSwiper('swiperList');
},
// 初始化swiper
tauchSwiper(name) {
let list = this.data[name];
for (let i = 0; i < list.length; i++) {
list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
list[i].mLeft = i - parseInt(list.length / 2)
}
this.setData({
swiperList: list
})
},
// tauchSwiper触摸开始
tauchStart(e) {
this.setData({
tauchStart: e.touches[0].pageX
})
},
// tauchSwiper计算方向
tauchMove(e) {
this.setData({
direction: e.touches[0].pageX - this.data.tauchStart > 0 ? 'right' : 'left'
})
},
// tauchSwiper计算滚动
tauchEnd(e) {
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 < list.length; i++) {
list[i - 1].mLeft = list[i].mLeft
list[i - 1].zIndex = list[i].zIndex
}
list[list.length - 1].mLeft = mLeft;
list[list.length - 1].zIndex = zIndex;
this.setData({
swiperList: list
})
} 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].mLeft
list[i].zIndex = list[i - 1].zIndex
}
list[0].mLeft = mLeft;
list[0].zIndex = zIndex;
this.setData({
swiperList: list
})
}
}
})
3、写在最后:实现简单,勤于动手,不需要任何插件,你自己就可以纯手撸一个‘花里胡哨’的轮播图…
4、贴下自己的小程序,有很多花里胡哨的东西,喜欢可以扫码查看