swiper实现老虎机抽奖

页面效果

组件代码

1、组件名draw.vue

<template>
	<view style="width: 100%;height: 100%;">
		<view class="draw-main">
			<draw-item ref="drawItem1" :interval="200" :duration="300" :drawImg="drawImg" style="width: 30%;height: 86%;" :index="drawIndex1"></draw-item>
			<draw-item ref="drawItem2" :interval="200" :duration="400" :drawImg="drawImg" style="width: 30%;height: 86%;" :index="drawIndex2"></draw-item>
			<draw-item @showDrawPop="showDrawPop" ref="drawItem3" :interval="200" :duration="500" :drawImg="drawImg" style="width: 30%;height: 86%;" :index="drawIndex3"></draw-item>
		</view>
	</view>
</template>

<script>
	import drawItem from './draw-item.vue';
	export default {
		components: {
			drawItem
		},
		data() {
			return {
				drawImg: [],//奖品相关图片信息
				isNowDraw: false, //是否正在抽奖
				showDrawInfo: false,
				drawLuckInfo: null, //抽奖结果
				drawIndex1: -1, //抽奖结果对应的下标1 -1为每次
				drawIndex2: -1, //抽奖结果对应的下标2
				drawIndex3: -1, //抽奖结果对应的下标3
				isDrawOn: false, //是否中奖
				isDrawClick:false,
			}
		},
		created() {
			this.loadLuckDrawInfo();
		},
		methods: {
			//抽奖相关基础信息获取
			loadLuckDrawInfo() {
				var imgList=['https://api.static.huibogoulive.cn/test/goods/pic/202104/c145f216-f216-4e44-90e2-e551d110ee89.jpg',
				'https://api.static.huibogoulive.cn/test/goods/pic/202104/1915f9c0-1338-456c-8532-581ce2c4959c.jpg',
				'https://api.static.huibogoulive.cn/test/goods/pic/202104/ee0d636f-2122-459e-864f-f3102031bd50.jpg',
				'https://api.static.huibogoulive.cn/test/goods/pic/202104/0433eb9d-5404-4a74-8047-767d5f2d1c44.jpg'];
				
				this.drawImg = imgList;
			},
			draw() {
				let _this = this;
				if(_this.isDrawClick){
					return;
				}
				_this.isDrawOn = false;
				_this.drawIndex1=-1;
				_this.drawIndex2=-1;
				_this.drawIndex3=-1;
				_this.isDrawClick = true;//防止重复点击
				_this.$emit("reduceCount");
				_this.isNowDraw = true;
				_this.$refs.drawItem1.itemScroll();
				setTimeout(function() {
					_this.$refs.drawItem2.itemScroll();
				}, 200);
				setTimeout(function() {
					_this.$refs.drawItem3.itemScroll();
				}, 400);
				
				//模拟抽奖结果
				//中奖对应的下标
				var num = parseInt(Math.random() * (_this.drawImg.length));
				_this.isDrawOn = !_this.isDrawOn;//抽奖结果
				//未中奖对应的下标
				var index = parseInt(Math.random() * (_this.drawImg.length));
				//停止滚动
				setTimeout(function() {
					if(_this.isDrawOn){
						_this.drawIndex1=num;
					}else{
						_this.drawIndex1=index;
					}
				}, 3000);
				setTimeout(function() {
					if(_this.isDrawOn){
						_this.drawIndex2=num;
					}else{
						_this.drawIndex2=(index+1)%_this.drawImg.length;
					}
				}, 3400);
				setTimeout(function() {
					if(_this.isDrawOn){
						_this.drawIndex3=num;
					}else{
						_this.drawIndex3=(index+2)%_this.drawImg.length;
					}
				}, 3800);
				
			},
			
			//奖品信息弹窗
			showDrawPop(){
				this.isDrawClick = false;
				//this.showDrawInfo = true;//中奖信息弹窗
			},
			lookAward(){
				this.showDrawInfo = false;
			},
		},
	}
</script>

<style lang="scss">
	.draw-main {
		// width: 100%;
		height: 100%;
		padding: 0 16rpx;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
</style>

2、组件名draw-item.vue

<template>
	<view style="width: 100%;height: 100%;display: flex;align-items: center;">
		<swiper style="width: 100%;height: 100%;;" @change="lhjChange" :skip-hidden-item-layout="true" :current="currentIndex" :disable-touch="true"
		 :acceleration="true" :indicator-dots="false" :autoplay="isStartDraw" :interval="interval" :duration="duration"
		 :display-multiple-items="1" :circular="true" :vertical="true">
			<swiper-item @touchmove.stop="stopTouchMove" v-for="(item,index) in drawImg" :key="index">
				<view class="img-border-item">
					<image style="width: 100%;height: 100%;border-radius: 10rpx;" mode="aspectFill" :src="item"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		props:{
			index:{//中奖结果
				type:Number,
				default:0
			},
			drawImg:{//图片源
				type: Array,
				default () {
					return [];
				}
			},
			interval:{//自动切换时间间隔
				type:Number,
				default:0
			},
			duration:{//滑动动画时长
				type:Number,
				default:0
			},
		},
		data() {
			return {
				isStartDraw:false,//是否开始抽奖
				currentIndex:0,//swiper对应的index
			}
		},
		onLoad(options) {
		},
		methods: {
			//禁止用户手动滑动
			stopTouchMove() {
				return true;
			},
			lhjChange(event){
				let that = this;
				if(this.index!=-1&& this.index==event.detail.current){
					that.isStartDraw = false;
					setTimeout(function(){
						//抽奖结束 弹窗显示
						that.$emit("showDrawPop")
					},1000)
				}
			},
			//触发滚动
			itemScroll(){
				this.isStartDraw = true;
			}
		},
	}
</script>

<style lang="scss">
	.img-border-item {
		height: 100%;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
	}
</style>

3,抽奖界面代码

<template>
	<view class="draw-container safe-area-inset-bottom">
		<view class="draw-header " style="display: flex; justify-content: flex-end;">
			<view style="display: flex;flex-direction: column;">
				<view style="width: 50rpx;height: 160rpx;margin-top: 20rpx;" @click="showDraw=true"></view>
				<view style="width: 50rpx;height: 160rpx;margin-top: 20rpx;" @click="showDrawRecord"></view>
			</view>
		</view>
		<view class="lhj-style">
			<view style="display: flex; align-items: center;justify-content: space-between;" class="lhj-center">
				<draw @reduceCount="reduceCount"  style="width: 100%;height: 100%;" ref="draw"></draw>
			</view>
			<view class="lhb-btn" @click="drawClick()"></view>
		</view>
		<view class="list-style" style="padding: 20rpx 0; text-align: center;">
			<block v-if="remainingDrawCount>0">
				<text>您还有<text>{{remainingDrawCount}}</text>次抽奖机会</text>
			</block>
			<block v-else>
				<text v-if="remainingDrawCount==0">您没有抽奖机会了~</text>
			</block>
		</view>
	</view>
</template>

<script>
	import draw from "../../components/draw.vue";
	export default {
		components: {
			draw
		},
		onLoad(options) {
		},
		data() {
			return {
				showDraw: false,//抽奖规则弹窗
				remainingDrawCount:100,
			}
		},
		methods: {
			
			reduceCount(){
				if(this.remainingDrawCount>0){
					this.remainingDrawCount--;
				}
			},
			//禁止用户手动滑动
			stopTouchMove() {
				return true;
			},
			showDrawRecord(){
				this.navToPage('/pagesA/luckDraw/drawRecord');
			},
			drawClick(){
				this.$refs.draw.draw();
			}
		},
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.draw-container {
		width: 100%;
		min-height: 100vh;
		background-image: url('https://api.static.huibogoulive.cn/prod/goods/pic/202103/87710328-577a-4ded-a6c9-ae672b92ecd9.jpg');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding-bottom: 200rpx;

		.draw-header {
			height: 392rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-image: url('https://api.static.huibogoulive.cn/prod/goods/pic/202103/9cef2bfd-1ca5-45fc-919a-1c080acafb0b.jpg');
		}

		.lhj-style {
			width: 750rpx;
			height: 555rpx;
			// padding-top: 82rpx;
			background-image: url('https://api.static.huibogoulive.cn/prod/goods/pic/202103/bce95d57-2494-4719-b32e-9934dd5585b7.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;

			.lhj-center {
				margin-left: 93rpx;
				width: 558rpx;
				height: 280rpx;
				padding-top: 82rpx;
				.lhb-draw-border-top {
					width: 134rpx;
					height: 6rpx;
					background-color: #fedea0;
					border-bottom-left-radius: 20rpx;
					border-bottom-right-radius: 20rpx;
				}

				.lhb-draw-border-bottom {
					width: 134rpx;
					height: 6rpx;
					background-color: #fedea0;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
				}

				.img-border {
					border-radius: 10rpx;
					padding: 6rpx;
					background-color: #fedea0;
					width: 160rpx;
					height: 234rpx;
					display: flex;
					align-items: center;
				}
			}

			.lhb-btn {
				width: 410rpx;
				height: 86rpx;
				margin-top: 60rpx;
				margin-left: 168rpx;
			}
		}

		.list-style {
			border-radius: 16rpx;
			background-color: #fff;
			margin: 0 30rpx;
			font-size: 26rpx;
			color: #0A0A0A;
		}
	}

	.btn-share-small {
		font-size: 26rpx;
		color: #fff;
		text-align: center;
		width: 500rpx;
		height: 70rpx;
		border-radius: 35rpx;
		line-height: 70rpx;
	}

	.parseHtml {
		/deep/img {
			display: block;
		}
	}
	.safe-area-inset-bottom {
	  padding-bottom: 0;  
	  padding-bottom: constant(safe-area-inset-bottom);  
	  padding-bottom: env(safe-area-inset-bottom);  
	}
</style>