当前位置：首页 > news >正文

uniapp 轮播列表左右滑动，滑动到中间放大

news 2025/6/28 11:18:05

在这里插入图片描述
html

	<!-- 轮播 --><view class="heade"><swiper class="swiper" display-multiple-items='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="u-f-s-26 weight-500 u-color-1D1">初级会员{{index}}--{{currentIndex}}</text><view class="u-color-FE6 weight-600 u-f-s-40 u-m-t-16"><text class="u-f-s-24 weight-400">￥</text> 99.00</view><view class="u-color-646 u-f-s-20 u-m-t-16">有效期30天</view></view></swiper-item></block></swiper></view><!-- 轮播 -->

javascript

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;}}
}

css

/* 轮播图 */.heade {height: 300rpx;position: relative;}.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: 24rpx;text-align: center;}