微信小程序大转盘完整代码

微信小程序大转盘完整代码

效果图

wxml片段

<!--index.wxml-->
<view class="container">
  <image src='/images/bg_1.jpg' class="bg_1"></image>
  <image src='/images/bg_2.png' animation="{{rotate}}" class="bg_2"></image>
  <image src='/images/start.png' bindtap="start" class="start"></image>

</view>

wxss内容

/**index.wxss**/
.bg_1{
  width: 650rpx;
  height: 651rpx;
  position: relative;
  top: -200rpx;
}
.bg_2{
  width: 514rpx;
  height: 514rpx;
  position: absolute;
  top: 60rpx;
}
.start{
  width: 134rpx;
  height: 163rpx;
  position: absolute;
  top: 220rpx;
}

js内容

//index.js
//获取应用实例
let animation = wx.createAnimation({
  duration: 2000,
  timingFunction: 'linear'
})

Page({
  data: {
    rotate: 0, //度数
    turning: false //是否点击
  },
  //事件处理函数
  start: function() {
    let _this = this;
    let cat = 60;
    if (!this.data.turning) {
      let rdm = 0; //随机度数
      rdm = Math.floor(Math.random() * 3600); //最大10圈
      //rdm = 1200;//直接确定转的度数
      animation.rotate(rdm).step();
      this.setData({
        rotate: animation.export(),
        turning: true
      });
      setTimeout(() => {
        this.setData({
          turning: false
        });
        let num = rdm % 360; //转了多少度
        //console.log(num);
        function showModal(str) {
          wx.showModal({
            title: '提示',
            content: str,
            success: function() { //点击确定后还原到0度
              let animation = wx.createAnimation({
                duration: 100,
                timingFunction: 'linear'
              });
              animation.rotate(0).step();
              _this.setData({
                rotate: animation.export(),
                turning: false
              });
            },
            fail: function(res) {
              console.log(res)
            }
          })
        }
        if (num <= cat * 0.5 && num >= cat * 5.5) {
            showModal('饿肚子~ε=(´ο｀*)))唉，不行再来一次？');
        } else if (num <= cat * 1.5 && num >= cat * 0.5) {
            showModal('今天就吃快餐吧！不要再想了！GOGO');
        } else if (num <= cat * 2.5 && num >= cat * 1.5) {
            showModal('今天就吃炸鸡吧！不要再想了！GOGO');
        } else if (num <= cat * 3.5 && num >= cat * 2.5) {
            showModal('今天就吃日料吧！不要再想了！GOGO');
        } else if (num <= cat * 4.5 && num >= cat * 3.5) {
            showModal('今天就吃西餐吧！不要再想了！GOGO');
        } else if (num <= cat * 5.5 && num >= cat * 4.5) {
            showModal('今天就吃面食吧！不要再想了！GOGO');
        }
        console.log(num)
      }, 2000)
    }


  },
  onLoad: function() {

  },


})

素材图片获取，扫一扫，回复“大转盘”获取图片

谢谢，代码简洁明了，生活不易忘多多支持，祝你前程似锦。
咨询问题，回复，“笔者”获取联系方式