小程序中实现最简转盘

html

		<view class="" style="position: relative;">
			<image src="http://jzconfigure.oss-cn-beijing.aliyuncs.com/serviceItem/start_202004171346.png" bindtap="start" class="goImg"></image>
			<image src="http://jzconfigure.oss-cn-beijing.aliyuncs.com/serviceItem/%E7%BB%84%202076%403x%20(1)_202004171343.png" class="bgImg" style="transform:{{'rotate(' + rotate + 'deg)'}};"></image>
			<view class="contain" style="transform:{{'rotate(' + rotate + 'deg)'}};">
				<view wx:for="{{prizeList}}" class="couItem" wx:key="index" style="">
					<view class="couName">{{item.prizeName}}</view>
					<image src="{{item.imageUrl}}" class="couponIMg"></image>
				</view>
			</view>

		</view>

js

 // data里面数据
roate:0,
prizeList:[
          {id: 442, imageUrl: "http://jz.yusucar.com/serviceItem/c4ae945507c3584197a55944a837c481_202004161321.png", prizeName: "🎧耳机"},
          {id: 443, imageUrl: "http://jz.yusucar.com/serviceItem/7cc2c1393f902206c3b4dcf736c66ae0_202004161321.png", prizeName: "车衣" },
          {id: 444, imageUrl: "http://jz.yusucar.com/serviceItem/e48add6019d2a3ac08df6d23688ec4de_202004161322.png", prizeName: "摆件"},
          {id: 445, imageUrl: "http://new-store.oss-cn-beijing.aliyuncs.com/serviceItem/10_202004091328.png", prizeName: "20元优惠券"},
          {id: 446, imageUrl: "http://new-store.oss-cn-beijing.aliyuncs.com/serviceItem/10_202004091328.png", prizeName: "10元优惠券"},
          {id: 447, imageUrl: "http://jzconfigure.oss-cn-beijing.aliyuncs.com/serviceItem/cry_202004150950.png", prizeName: "谢谢参与"}
        ],

 rand(n, m) {
    var c = m - n + 1;
    return Math.floor(Math.random() * c + n);
  },
start() {
    console.log( this.data.count )
 
    if( this.data.count <= 0){
      wx.showToast({
        title: '您已经参与过该活动',
        icon:'none'
      })
      return;
    }
    console.log(this.flag)
      if( this.flag ){     //flag  是判断不要点击多次  不然会多次触发接口
        return;
      }
      this.flag = true
      this.apiLoding = setInterval(() => {   //设置定时器   目的是为了点击后就开始转  不然等请求完会有延迟
        this.setData({
          rotate: this.data.rotate + 15,  //  这里旋转角度 加随机数  
        })
      }, 100)
      console.log('请求中...')
      app.getApi({
        url: `Activity/getdrawprize?orderId=${this.data.orderId}`,		//这是请求接口操作  会返回哪个中奖了
        isRetry: true
      }).then(res => {
        console.log("getdrawprize", res.data);
      
        let count = this.data.count - 1
        console.log('请求成功...')
        this.setData({
          awardValue:res.data,
          count:count
        })
        console.log( this.data.count )
        var i ;      //  i  是中奖下标  我根据循环拿到了下标    应该有更简单方式    各位随意操作
        for (let index = 0; index < this.data.prizeList.length; index++) {
          if(this.data.prizeList[index].id == res.data.prizeId){
            console.log(index)
            i = index 
          }
        }
        clearInterval(this.apiLoding)			//  拿到下标就清除一开始设置的定时器
        console.log(i)
        //下面这块就是设置转的角度 和  停在哪个位置
        var rotateEnd = 360 * 2 + this.rand(60 * i + 7, 60 * (i + 1) - 7) - 30;   
        var speed = 0;
        this.timerInterval = setInterval(() => {
          speed = Math.ceil(((rotateEnd - this.data.rotate) / 20));
          if (this.data.rotate + speed >= rotateEnd) {
            this.setData({  
              rotate: rotateEnd % 360
            })
            rotateEnd = rotateEnd % 360;
            let prize = Math.floor((Math.abs(this.data.rotate) + 30) / 60);
            if (prize == this.prizeNum) {
              prize = 0;
            }
            console.log(this.data.prizeList[i]);
            
            clearInterval(this.timerInterval);
            setTimeout(()=>{
              this.setData({
                awardInfo:true,
              })
            },1000)
          } else {
            this.setData({
              rotate: this.data.rotate + speed
            })
          }
        }, 100)
      }).catch(res => {
        console.log("getdrawprize", res);
        clearInterval(this.apiLoding)
        clearInterval(this.timerInterval);
        this.flag = false
      })
  },

css

/* 转盘 */
.bgImg{
  width: 616rpx;
  height: 616rpx;
}
.couponIMg{
  width: 75rpx;
  height: 75rpx;
  margin-top: 4rpx;
}
.contain{
  width: 616rpx;
  height: 616rpx;
  position: absolute;
  top: 0;
  left: 0;
}
.goImg{
  
  position: absolute;
  width: 122rpx;
  height: 158rpx;
  top: 215rpx;
  left: 240rpx;
  z-index: 2;
  
}
.couItem{
  height: 308rpx;
  width: 205rpx;
  position: absolute;
  top: 0;
  left: 205rpx;
  padding-top: 70rpx;
  box-sizing: border-box;
  text-align: center;
  transform-origin: center bottom; 
}

.couItem:nth-child(2){
  transform: rotate(-60deg);
}
.couItem:nth-child(3){
  transform: rotate(-120deg);
}
.couItem:nth-child(4){
  transform: rotate(-180deg);
}
.couItem:nth-child(5){
  transform: rotate(120deg);
}
.couItem:nth-child(6){
  transform: rotate(60deg);
}
.couName{
  font-size:24rpx;
  font-weight:bold;
  line-height:48rpx;
  color:#D08E4C;
  width: 202rpx;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}