uniapp 实现3d轮播图,也就是中间的放大两边的缩小 用swiper和swiper-item就能实现

话不多说,直接上代码,无需引入外部资源, 用swiper和swiper-item就能实现

先上结构代码

html 复制代码
<swiper class="header" circular previous-margin="80rpx" next-margin="60rpx" :current="current"
				@change="changeIndex">
				<swiper-item v-for="(item, index) in bannerList" :key="index">
					<!-- 当前所在滑块的 index == index 放大 -->
					<view :class=" current === index ? 'slide-image active' : 'slide-image quiet'">
						<image :src="item.url" style="width: 100%;height: 76%;">
						</image>
						<view class="" style="padding: 0 20rpx;">
							<view class=""
								style="display: flex; color: #000;font-weight: 600;height: 60rpx;align-items: center;justify-content: space-between;">
								<view class="">
									{{item.title}}
								</view>
								<image
									src="https://haowu.shenzhenlinghang.com/uploads/20240924/0e234868d2cff972a73c8299b4f6d7a7.png"
									mode="heightFix" style="height: 50rpx;"></image>
							</view>
							<view class="innnerbox">
								<view class="inner1">
									<view class="inner2" style="width: 70%;height: 100%;background-color: #6ac4b0;border-radius: 15rpx;">

									</view>
								</view>
								<view class="">
									已抢{{item.count}}份
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>

下面是css部分

javascript 复制代码
.header {
		box-sizing: border-box;
		width: 100%;
		height: 452rpx;

		// margin: 50% auto;
		background-color: #e9f4f2;
		color: #fff;
		border-radius: 10rpx;
		margin-bottom: 50rpx;

		.slide-image {
			width: 600rpx;
			height: 452rpx;
			background: #fff;
			border-radius: 10rpx;

			.innnerbox {
				margin-top: 10rpx;
				height: 20rpx;
				align-items: center;
				display: flex;
				color: #64c1ad;
				font-size: 24rpx;
				justify-content: space-between;

				.inner1 {
					width: 70%;
					background-color:#e7f6f3;
					height: 100%;
					border-radius: 15rpx;
				}
			}
		}

		.active {
			// 中间放大动画
			transform: none;
			transition: all 0.2s ease-in 0s;
		}

		.quiet {
			// 两边缩小动画
			transform: scale(0.95);
			opacity: 0.4;
			transition: all 0.5s ease-in 0s;
		}
	}

还有最关键的js部分代码

javascript 复制代码
const bannerList = ref([{
			url: 'https://haowu.shenzhenlinghang.com/uploads/20240924/deba83e41e2823b2ae91fd54c9c6a701.png',
			count: 5000,
			title: '万益蓝品牌 折扣盛世来袭'
		},
		{
			url: 'https://haowu.shenzhenlinghang.com/uploads/20240924/580881703835073e3a03a79659e77cb5.png',
			count: 5001,
			title: '万益蓝品牌 折扣盛世来袭'
		},
		{
			url: 'https://haowu.shenzhenlinghang.com/uploads/20240924/deba83e41e2823b2ae91fd54c9c6a701.png',
			count: 5002,
			title: '万益蓝品牌 折扣盛世来袭'
		}
	])

	const current = ref(0)
	const changeIndex = (e) => {
		// console.log(e.detail.current, 'e.detail.current');
		current.value = e.detail.current
	}

swiper的属性不懂的可以去看swiper | uni-app官网

相关推荐
2501_915909062 小时前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918413 小时前
iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者86 小时前
如何系统化掌握 iOS 26 App 耗电管理,多工具协作
android·macos·ios·小程序·uni-app·cocoa·iphone
BumBle7 小时前
uniapp AI聊天应用技术解析:实现流畅的Streaming聊天体验(基础版本)
前端·uni-app
2501_915921437 小时前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q196328847513 小时前
python+uniapp基于微信美食点餐系统小程序
spring boot·python·微信·django·flask·uni-app·node.js
阿金要当大魔王~~14 小时前
uniapp 请求携带数据 \\接口传值 \\ map遍历数据
前端·javascript·uni-app
2501_9151063216 小时前
HTTPS 爬虫实战指南 从握手原理到反爬应对与流量抓包分析
爬虫·网络协议·ios·小程序·https·uni-app·iphone
2501_9160074716 小时前
iOS 上架技术支持全流程解析,从签名配置到使用 开心上架 的实战经验分享
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916007471 天前
提升 iOS 26 系统流畅度的实战指南,多工具组合监控
android·macos·ios·小程序·uni-app·cocoa·iphone