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

html

javascript 复制代码
	<!-- 轮播 -->
					<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

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

javascript 复制代码
/* 轮播图 */
	.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;
		}
相关推荐
小徐_23331 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮1 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw51 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !1 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918411 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张1 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张2 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬2 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106322 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq2 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app