<template>
<view class="focus" :style="{'width': width + 'rpx'}">
<view class="ul">
<view v-for="(item,index) in list" :key="item.id" class="li"
:style="{'z-index': -1 * index,'width': itemWidth + 'rpx','transform':translateX(index+moving),'transition': transition,}">
<view class="item" :style="{'transform':`scale(${1-0.1*index+scale})`,'transition': transition}"
@transitionend="transitionend(index)">
<view class="item-content" :style="{'opacity':index ? 1 : moving ? 0 : 1}">
<image class="img" :src="item.url"></image>
<view class="">
666666666<br>
666666
</view>
</view>
</view>
</view>
<view class="li"
:style="{'z-index': -1 * list.length,'width': itemWidth + 'rpx','transform':translateX(list.length+moving)}">
<view class="item" :style="{'transform':`scale(${1-0.1*list.length+scale})`,'transition': transition}">
<image class="img" :src="list[0].url"></image>
<view class="">
666666666<br>
666666
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 整个轮播图的宽度
width: {
type: Number,
default: 750
},
// 轮播图里每张的宽度
itemWidth: {
type: Number,
default: 600
},
interval: {
type: Number,
default: 3000
},
duration: {
type: Number,
default: 1000
}
},
data() {
return {
list: [{
url: 'https://i0.hdslb.com/bfs/feed-admin/bcb259e99288a0f5e11040b9f0a51c6eb9d8405f.png',
id: 1
},
{
url: 'https://i0.hdslb.com/bfs/sycp/creative_img/202109/472d7ba939e323a4fe5dd205ca4146e8.jpg@880w_388h_1c_95q',
id: 2
},
{
url: 'https://i0.hdslb.com/bfs/feed-admin/4458cae9f0f353841a5c89dec2ad9a8437df79e5.png@880w_388h_1c_95q',
id: 3
}
],
scale: 0, //移动的时候控制缩放
rightPadding: 0, //计算右边每张图要凸出来多少
padding: 0, //计算缩放后,缩放的图片右边空出的距离
transition: `all ${this.duration/1000}s`, //控制过渡
moving: 0, //0表示不动,-1表示正在移动
timer: null //定时器
}
},
mounted() {
// 右边凸出来的单张的宽度
this.rightPadding = (this.width - this.itemWidth) / (this.list.length - 1);
this.padding = this.itemWidth * 0.1 / 2;
this.setAction()
},
methods: {
transitionend(index) {
if (!index) {
this.transition = "none";
this.scale = 0;
this.moving = 0;
this.list.push(this.list.shift());
}
},
setAction() {
this.timer = setInterval(() => {
this.transition = `all ${this.duration/1000}s`;
this.scale = 0.1;
this.moving = -1;
}, this.interval)
},
// 初始时每张的偏移宽度
translateX(index) {
const scaleRightPadding = this.itemWidth * 0.1 * index / 2;
return `translateX(${this.rightPadding * index + scaleRightPadding + 'rpx'})`
}
},
beforeDestroy() {
this.timer && clearInterval(this.timer)
}
}
</script>
<style lang="scss" scoped>
.focus {
position: relative;
overflow: hidden;
width: 750rpx;
height: 500rpx;
.img {
width: 100%;
height: 80%;
vertical-align: middle;
}
.ul {
position: absolute;
width: 100%;
height: 100%;
.li {
position: absolute;
height: 100%;
}
}
.item {
width: 100%;
height: 100%;
.item-content {
width: 100%;
height: 100%;
background-color: #fff;
}
}
}
</style>
用uniapp写堆叠卡片式轮播图
最新推荐文章于 2024-08-07 20:58:21 发布