3' circular='true' previous-margin='1rpx' next-margin='1rpx' current='0' @change="swiperChange"> <block v-for="(item,index) in list" :key='index'> <swiper-item class="sitem"> <view class="swiper-item" :class="{current:index==currentIndex}"> <text class="">轮播{{index}}--{{currentIndex}}</text> <view class=""><text>¥</text> 99.00</view> <view class="">详情信息1详情信息2详情信息3</view> </view> </swiper-item> </block> </swiper> </view> <!-- 轮播 -->
<script>
export default {
data() {
return {
currentIndex: 1,
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
}
},
methods: {
swiperChange(event) {
let a = 1;
if (event.detail.current == (Number(this.list.length) - 1)) {
// 滑动到最后一个时, currentIndex 和 数组的下标 index 相等
a = -(Number(this.list.length) - 1)
}
this.currentIndex = event.detail.current + a;
}
}
}
</script>
<style scoped>
/* 轮播图 */
.heade {
height: 300rpx;
position: relative;
padding-top:100rpx;
}
.sitem {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
}
.swiper {
width: 100vw;
position: absolute;
bottom: 0;
left: 0;
}
.current {
transform: scale(1.15);
position: absolute;
background: #FFF7F0 !important;
border: 2rpx solid #FFAA9A !important;
top: 6rpx;
left: 0rpx;
right: 0rpx;
z-index: 10;
transition: all 0.2s ease-in 0s;
border-radius: 16rpx;
}
uni-swiper-item {
overflow: inherit;
}
.swiper-item {
box-sizing: border-box;
position: relative;
background: #FCFCFF;
border-radius: 16rpx;
border: 2rpx solid #DFE4E9;
padding: 16rpx;
text-align: center;
width: 212rpx;
}
</style>