上边
<view class="lervor-card-page">
<swiper class="card-swiper" autoplay circular previous-margin="65rpx" next-margin="65rpx"
@change="changeCard">
<swiper-item v-for="(item, index) in cardList" :key="index" @click="toPage(item)">
<view
:class="['card-item', currentCardIndex === index ? 'card-item-current' : 'card-item-default']">
<image class="card-bg" :src="item.image" mode=""></image>
</view>
</swiper-item>
</swiper>
<view class="listBox">
<view class="dLine">
<view v-for="(item,index) in cardList" :key="index"
:class="['dian', currentCardIndex === index ? 'heidian' : 'huidian']">
</view>
</view>
</view>
</view>
js
export default {
data() {
return {
currentCardIndex: 0,
cardLis: [],
}
},
onShow() {},
watch:{},
onLoad(e) {
this.getBannerList()
},
methods: {
// 获取轮播图列表
getBannerList(){},
}
}
cssw
.card-swiper {
width: 100%;
height: 292rpx; // 轮播图片的高度
background: #fff;
}
.card-item {
transition: transform 0.3s; // 缩放动画播放 0.3S
border-radius: 10rpx;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
padding: 26rpx 36rpx 0;
color: #FFFFFF;
position: relative;
}
.card-bg {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.card-item-default {
transform: scale(0.9, 0.80) translateY(0rpx); // 缩小到原来的 0.96,并沿Y轴向下移动 50rpx
}
.listBox{
min-width: 60rpx;
height: 50rpx;
display: flex;
justify-content: center;
align-items: center;
}
效果:
有bug再评论