uni-app的转盘抽奖效果,要注意的点:
1、不能操作dom
2、主要靠css3的transition & transform让转盘旋转
以下是uni-app转盘抽奖效果的代码:
<template>
<!-- 转盘 -->
<view v-if="isTurntable" class="contanier-box">
<!-- 旋转的圆盘,主要靠css3的transition & transform让转盘旋转-->
<view
class="turntable-box"
:style="{transition: 'transform ' + rotateTime + 's ease-in-out', '-webkit-transition': 'transform ' + rotateTime + 's ease-in-out', transform:'rotate('+finalAngle+'deg)','-webkit-transform':'rotate('+finalAngle+'deg)','-moz-transform':'rotate('+finalAngle+'deg)'}"
>
<view class="box turntable">
<!-- 分块线,用css画转盘 -->
<view class="snip" v-for="(item,index) in 3" :key="index"></view>
<!-- 奖品 -->
<view class="list">
<view class="item" v-for="(item,index) in awardList" :key="index">
<text class="text">{
{item.text}}</text>
<image :src="domain+item.img" class="img"></image>
</view>
</view>
</view>
</view>