微信小程序大转盘完整代码-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序大转盘完整代码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

效果图

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

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() {

  },


})