优化首页兑奖奖品滚动

App.vue

@@ -92,4 +92,17 @@
 		-webkit-box-orient: vertical;
 		-webkit-line-clamp: 1;
 	}
+	
+	// 只有在app.vue里面定义的keyframes才能在style里面使用
+	@keyframes moveLeft {
+		0% {
+			-webkit-transform: translate3d(0, 0, 0);
+			transform: translate3d(0, 0, 0);
+		}
+	
+		100% {
+			-webkit-transform: translate3d(-100%, 0, 0);
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
 </style>

pages/index/index.vue

@@ -45,15 +45,18 @@
 					</swiper-item>
 				</swiper>
 				<!-- 奖品 -->
-				<swiper class="prize-container" previous-margin="270rpx" next-margin="270rpx" circular :duration="15000"
-					:interval="1500" easing-function="easeOutCubic" :disable-touch="true" :autoplay="true">
-					<swiper-item class="swiper-item" v-for="(item, index) in prizeList" :key="index"
-						@click="toPrizeGoods(item)">
-						<view class="flex image-wrap">
+				<view class="prize-goods">
+					<view class="prize-goods-item" :style="{ animation: activeAnimation }">
+						<view class="flex image-wrap" v-for="(item, index) in prizeList" :key="index" @click="toPrizeGoods(item)">
 							<image class="img" :src="item.picUrl" lazy-load mode="aspectFill"></image>
 						</view>
-					</swiper-item>
-				</swiper>
+					</view>
+					<view class="prize-goods-item" :style="{ animation: activeAnimation }">
+						<view class="flex image-wrap" v-for="(item, index) in prizeList" :key="index" @click="toPrizeGoods(item)">
+							<image class="img" :src="item.picUrl" lazy-load mode="aspectFill"></image>
+						</view>
+					</view>
+				</view>
 				<!-- 盲票背景 -->
 				<image class="box-img" src="../../static/icon/index_box.png" mode="" @click="toTicketBox"></image>
 				<!-- 向左箭头 -->
@@ -90,7 +93,7 @@
 			CustomTabBar,
 			Carousel,
 			PayPopup,
-			PrizeNews
+			PrizeNews,
 		},
 		data() {
 			return {
@@ -102,6 +105,7 @@
 				payShow: false, // 支付弹框显示
 				payInfo: {}, // 支付详情
 				currentIndex: 0, // 盲票选中下标
+				activeAnimation: 'moveLeft 10s linear infinite normal', // 奖品动画
 			};
 		},
 		onLoad(opthios) {
@@ -121,6 +125,7 @@
 		onShow(opthios) {
 			this.loginState = uni.getStorageSync('token') ? true : false
 			this.getPrizeNews()
+
 		},
 		methods: {
 			// 获取盲票列表
@@ -188,6 +193,9 @@
 							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
 						})
 						this.prizeList = prizeList
+						// 根据奖品数量动态设置动画时间
+						let time = Math.ceil(this.prizeList.length / 5 * 10)
+						this.activeAnimation = `moveLeft ${ time }s linear infinite normal`,
 						this.payInfo = this.ticketList[this.currentIndex]
 					}
 				}).catch(() => {
@@ -301,9 +309,9 @@
 					// 	})
 					// }
 					// if (item.couponType == "2") {
-						// uni.navigateTo({
-						// 	url: `/pages/prizeGoods/detail?id=425`
-						// })
+					// uni.navigateTo({
+					// 	url: `/pages/prizeGoods/detail?id=425`
+					// })
 					// }
 					uni.navigateTo({
 						url: `/pages/prizeGoods/detail?id=425`
@@ -463,23 +471,23 @@
 				}
 			}
 
-			.prize-container {
-				width: 750rpx;
+			.prize-goods {
+				display: flex;
+				width: 100vw;
 				height: 13vh;
 				margin-top: 2vh;
+				overflow: hidden;
 
-				.swiper-item {
-					width: 100rpx;
-					height: 13vh;
+				.prize-goods-item {
 					display: flex;
-					justify-content: flex-start;
-					align-items: center;
+					height: 13vh;
 
 					.image-wrap {
 						width: 160rpx;
 						height: 13vh;
 						border-radius: 20rpx;
 						background: linear-gradient(0deg, #e6e6e6, #FFFFFF);
+						margin-right: 60rpx;
 
 						.img {
 							width: 100%;
@@ -487,7 +495,6 @@
 						}
 					}
 				}
-
 			}
 
 			.index-left {