uniapp开发小程序，实现堆叠卡片轮播图
<!-- 折叠轮播图 组件-->
<template>
<view class="swpbig">
<view class="swiperPanel" ref="swiperPanel" @touchstart="startMove" @touchend="endMove">
<view class="swiperItem" v-for="(item, index) in swiperList" :key="index" :style="{transform: itemStyle[index].transform, zIndex: itemStyle[index].zIndex, opacity: itemStyle[index].opacity}">
<view class="children">
<view class="pic">
<image class="pici" :src="item.url"></image>
<image class="banner_signal" src="../../static/banner_signal.png" mode=""></image>
<view class="swpnew">标题</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
var timer;
export default {
props: {
swiperList: {
type: Array,
default: ()=>[
{
type: 'Array',
url: '../../static/ceshi1.png',
}, {
type: 'Array',
url: '../../static/ceshi2.png',
}, {
type: 'Array',
url: '../../static/ceshi3.png',
}
]
}
},
data() {
return {
slideNote: {
x: 0,
y: 0
},
screenWidth: 0,
itemStyle: []
};
},
created() {
var macInfo = uni.getSystemInfoSync();
this.screenWidth = macInfo.screenWidth;
// 计算swiper样式
this.swiperList.forEach((item, index) => {
this.itemStyle.push(this.getStyle(index))
})
timer = setInterval(()=>{
this.rightSlider();
},3000)
},
methods: {
rightSlider(){
var newList = JSON.parse(JSON.stringify(this.itemStyle));
var last = [newList.pop()]
newList = last.concat(newList)
this.itemStyle = newList;
},
getStyle(e) {
if (e > this.swiperList.length / 2) {
var right = this.swiperList.length - e
return {
transform: 'scale(' + (1 - right / 10) + ') translate(-' + (right * 9) + '%,0px)',
zIndex: 9999 - right,
opacity: 0.5 / right
}
} else {
return {
transform: 'scale(' + (1 - e / 10) + ') translate(' + (e * 9) + '%,0px)',
zIndex: 9999 - e,
opacity: 0.5 / e
}
}
},
startMove(e) {
clearInterval(timer);
this.slideNote.x = e.changedTouches[0] ? e.changedTouches[0].pageX : 0;
this.slideNote.y = e.changedTouches[0] ? e.changedTouches[0].pageY : 0;
},
endMove(e) {
timer = setInterval(()=>{
this.rightSlider();
},3000)
var newList = JSON.parse(JSON.stringify(this.itemStyle));
if ((e.changedTouches[0].pageX - this.slideNote.x) < 0) {
// 向左滑动
var last = [newList.pop()]
newList = last.concat(newList)
} else {
// 向右滑动
newList.push(newList[0])
newList.splice(0, 1)
}
this.itemStyle = newList
}
}
}
</script>
<style lang="scss">
.swpbig{
overflow: hidden;
}
.swiperPanel {
margin-top: 200upx;
height: 680upx;
width: 686upx;
overflow: hidden;
position: relative;
margin-left:80upx;
.swiperItem {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0upx;
transition: all .5s;
.children {
// height: 100%;
width: 570upx;
margin: 2upx 160upx 2upx 0;
position: relative;
.pic {
position: relative;
height: 645rpx;
width: 560rpx;
border-radius: 10upx;
}
.pici{
position: absolute;
height: 645rpx;
width: 560rpx;
border-radius: 10upx;
}
.banner_signal{
position: absolute;
height: 645rpx;
width: 560rpx;
top: 0;
}
.swpnew{
position: absolute;
height: 63rpx;
font-size: 45rpx;
font-weight: bold;
color: #FFF;
line-height: 53rpx;
right: 28rpx;
margin-top: 12rpx;
letter-spacing: 5rpx;
}
}
}
}
</style>