幸运大转盘抽奖（前端uniapp）_前端抽奖代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_48029998/article/details/125455580

幸运大转盘抽奖（前端js）

在一个商城项目中用到了大转盘抽奖，来此记录一下，样式和图片自己微调一下就好了！！！

在这里插入图片描述

<template>
	<view class="collection">
		
		<luckydraw class="luckydraw" @finish="drawFinished"></luckydraw>
	</view>
</template>
<script>
	import luckydraw from '@/components/luckydraw/index.vue';
	export default {
   
		components: {
   
			luckydraw: luckydraw
		},
		data() {
   
			return {
   
	
			}
		},
		onShow() {
   
		},

		methods: {
   
			//接收转盘结束事件
			drawFinished(){
   
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	
</style>

下面是组件代码

<template>
	<view class="lucky-draw" :style="scale">
		<image class="lucky-draw__bg" src="./images/background.png" mode="widthFix" style="width: 750rpx;"></image>
		
		<view class="lucky-draw__objects" :style="rotateStyle">
			<image src="./images/objects-bg.png" class="lucky-draw__objects__bg"></image>
			<view class="lucky-draw__objects__object" v-for="(item, index) in dataA" :key="index" :style="{
          transform: `translate(-50%) rotate(${(360 / 8) * index}deg)`,
        }">
		
				<view class="lucky-draw__objects__object__title">{
  { item.name }}</view>
				<image class="