uni-app转盘抽奖

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>