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;
		}
相关推荐
陈不知代码11 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
源码_V_saaskw11 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
996幸存者16 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮17 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
耶啵奶膘21 小时前
uniapp+vue3——通知栏标题纵向滚动切换
uni-app
The_era_achievs_hero1 天前
UniappDay03
vue.js·微信小程序·uni-app
游戏开发爱好者82 天前
没有 Mac,如何上架 iOS App?多项目复用与流程标准化实战分享
android·ios·小程序·https·uni-app·iphone·webview
Python大数据分析2 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
一只一只妖2 天前
uniapp小程序上传图片并压缩
小程序·uni-app
顽疲3 天前
从零用java实现 小红书 springboot vue uniapp(14) 集成阿里云短信验证码
java·vue.js·spring boot·阿里云·uni-app