HTML代码块

<view class="choujiang">
	<view class="wheel-wrapper">
		<view class="wheel-pointer" :class="{freeze: btnImg}" @click="onClickRotate">
			<image :src="btnImg" style="width: 150upx;" mode='widthFix'></image>
		</view>
		<view class="wheel-bg" :class="{freeze: bgImg}"
			:style="{ transform: 'rotate('+wheelDeg+'deg)',background:'url('+bgImg+')'}">
			<view class="prize-list">
				<view class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index">
					<view class="prize-item"
						:style="{ transform: 'rotate('+(360/ prizeList.length) * index+'deg)'}">
						<view class="prize-name">
							{{ item.award_name }}
						</view>
						<view class="prize-icon">
							<text class="iconfont iconhb">&#xe61d;</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>

CSS代码块

.choujiang{
	width:100%;
	height: 600rpx;
}

.wheel-wrapper {
	width: 600upx;
	height: 600upx;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.wheel-pointer {
	width: 150upx;
	height: 192upx;
	border-radius: 1000px;
	background: yellow;
	position: absolute;
	left: 50%;
	top: 61%;
	margin-top: -88upx;
	transform: translate(-50%, -50%);
	text-align: center;
	line-height: 120upx;
	z-index: 10;
}

.wheel-bg {
	width: 100%;
	height: 100%;
	border-radius: 1000px;
	overflow: hidden;
	transition: transform 4s ease-in-out;
	background: #dcdcdc;
}

.freeze {
	border-radius: 0;
	background: none;
	background-size: 100% !important;
}

.prize-list {
	width: 100%;
	height: 100%;
	position: relative;
	text-align: center;
}

.prize-item-wrapper {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 300upx;
	height: 300upx;
}

.prize-item {
	width: 100%;
	height: 100%;
	transform-origin: bottom;
}

.prize-name {
	padding: 86upx 0 10upx;
	color: #E73636;
	font-size: 32rpx;
	font-weight: bold;
}

.prize-icon .iconhb {
	font-size: 50rpx;
	color: #FA4A4A;
}

script代码块

// data函数中
data() {
	return {
		prizeList: [], //奖品分类
		bgImg: '../../static/img/pan.png', //  转盘背景
		btnImg: '../../static/img/zhen2.png', //  转盘指针图片
		lucky: '', //  中奖ID
		prizeNumber: 8, //  转盘显示奖品个数
		rolling: false, //控制转盘转动
		wheelDeg: 0, //转的角度
	}
},
//methods对象中
onClickRotate() {
	let that = this;
	//参数
	let data = {
		type: that.type,
		id: that.detail.id,
	}
	//接口，参考我写的接口封装，也可以用自己的办法，主要的是接口请求成功后的操作
	that.apifun.unirequest(that.apifun.turntable_luckdraw, 'post', data, (res) => {
		if (res.code === 1) {
			let data = res.data;
			//后端返回的中奖id
			that.lucky = data.award;
			let luckyindex = '';
			let text = '恭喜得到' + data.award_title + data.memo;
			//为了转盘停到指控区域，通过返回的中奖id，在奖品列表里面查找对应的奖项的索引
			that.prizeList.forEach((item, index) => {
				if (that.lucky == item.id) {
					luckyindex = index * 1;
				}
			})
			that.rolling = true; //中奖成功，控制转盘转动
			const {
				wheelDeg,
				prizeList
			} = this;
			//数字8是转盘的块数也是奖项的数量，luckyindex中的奖项的索引
			this.wheelDeg =
				wheelDeg -
				wheelDeg % 360 +
				8 * 360 +
				(360 - 360 / prizeList.length * luckyindex);
			//中奖返回中奖信息，this.apifun.toast(text);是封装的提示，可以用uniapp的提示方法代替
			setTimeout(() => {
				this.rolling = false;
				this.apifun.toast(text);
			}, 4500);
		} else {
			that.apifun.toast(res.msg)
		}
	})
},

注意：此篇文章转自博主 萧棠 ，感谢他所作贡献：查看原创文章请点击