所有的抽獎都是由後臺計算後

 <!-- 輪播展示中獎資訊區域 -->
  <swiper autoplay="{{true}}" interval="{{1500}}" circular="{{true}}" vertical='{{true}}'>
    <block wx:for="{{prizeInfo}}" wx:key="index">
      <swiper-item>
        <view>{{item.name}}{{item.prize}}</view>
      </swiper-item>
    </block>
  </swiper>
</view>
<!-- 輪播結束 抽獎轉盤 -->
<view class='turntable' bindtap='doLottery'>
  <image class='turntable-bj' style="transition:all {{time?time:'3s ease-in'}}; transform:rotate({{transformDeg + 'deg'}}) " src='../../../img/turntable.png'></image>
  <image class='arrow' src='../../../img/arrow.png'>
  </image>
</view>得到的，前臺只做動畫展示
 

const app = getApp();
var index = {
  data:{ 
    prizeInfo:[
      {
        name:'qiphon',
        prize:'5元'
      },
      {
        name:'qiphon23423',
        prize:'53元'
      },
      {
        name:'qipsdfhon',
        prize:'35元'
      }
    ],
    transformDeg:0, // 旋轉角度
    transition:'all 3s cubic-bezier(0.005, 1.340, 1.000, 0.865)',
    time:'999s'
  },
  onLoad(opt){
    console.log(opt)
 
  },
  onReady(){
    this.animation = wx.createAnimation({
      timingFunction:'esse-in-out',
      duration:2000
    });
    this.animationDeg = 360;
  },
  loadCoupons(){ // 載入獲獎資訊
     
  },
  doLottery(){ // 抽獎
    var _this = this;
    if(this.aniRotate)return;
    this.aniRotate = true;
    this.setData({
      transformDeg:this.data.transformDeg + 360*900,
      time:'100s ease'
    })
    setTimeout(function(){
      console.log('請求完成'+_this.data.transformDeg) // setTimeout 模擬ajax請求
      _this.setData({
        transformDeg:-360*4,
        time:'3s ease'
      })
      setTimeout(function(){
        console.log('返回結果'+_this.data.transformDeg)
        _this.setData({
          transformDeg:360*2 + 0,
          time:'6s cubic-bezier(0.000, 0.765, 0.000, 0.955)'
        })
        setTimeout(function(){
          _this.aniRotate = false;
          wx.showModal({
            title:'中獎資訊',
            content:'恭喜獲得獎品'
          })
        },6000)
      },2000)
    },3000)
  },
}
Page(index);
 

.top-banner{
  background: #fff;
  padding:20rpx;
}
.top-banner swiper{
  height: 50rpx;
  line-height: 50rpx;
}
/* 轉盤 */
.turntable{
  position: relative;
  width: 100%;
  height: 530rpx;
}
.turntable-bj{
  display: block;
  margin:0 auto;
  width:600rpx;
  height: 530rpx;
}
.turntable .arrow{
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom:110rpx;
  margin:auto;
  width:93.5rpx;
  height: 212rpx;
}
 

以上就是本文的全部內容，希望對大家的學習有所幫助

本次給大家推薦一個交流圈，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入：582735936，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。