1

components/tony-scroll-self/tony-scroll-self.vue

@@ -0,0 +1,86 @@
+<template>
+	<view>
+		<view class="scroll_box">
+			<swiper class="swiper" circular="true" vertical="true" display-multiple-items="4" :autoplay="autoplay"
+				:interval="interval" :duration="duration">
+				<swiper-item v-for="(item,index) in list" :key="index">
+					<view class="swiper-item">
+						<view class="line1">{{item.nickName}}</view>
+						<view class="line2">
+							<text>抽到</text>
+							<text class="line2-amount">{{item.value}}</text>
+						</view>
+					</view>
+				</swiper-item>
+			</swiper>
+		</view>
+	</view>
+</template>
+<script>
+	export default {
+		name: '',
+		props: {
+			autoplay: {
+				type: Boolean,
+				default: true
+			},
+			interval: {
+				type: Number,
+				default: 1000
+			},
+			duration: {
+				type: Number,
+				default: 1000
+			},
+			datalist: {
+				type: Array,
+				default: []
+			},
+		},
+		data() {
+			return {
+				list: [],
+			}
+		},
+		watch: {
+			datalist: {
+				immediate: true,
+				handler(val) {
+					this.list = val
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.scroll_box {
+		background: #FFFFFF;
+		border-radius: 10rpx;
+
+		.swiper {
+			height: 400rpx;
+		}
+	}
+
+	.swiper-item::after {
+		content: '';
+		clear: both;
+	}
+
+	.swiper-item {
+		overflow: auto;
+	}
+
+	.swiper-item .line1 {
+		float: left;
+	}
+
+	.swiper-item .line2 {
+		float: right;
+	}
+
+	.swiper-item .line2 .line2-amount {
+		color: #EF4A4A;
+	}
+</style>