小程序抽奖活动

活动效果图.png
/**
   * 页面的初始数据
   */
  data: {
    curPosition: 0,//当前转动到的位置
    count: 8,    // 总共有多少个位置
    myInterval: 0,    // 定时器
    speed: 300,//速度,速度值越大,则越慢 初始化为300
    max_speed: 40,   // 滚盘的最大速度
    times: 0,    // 转动次数
    cycle: 5,   // 转动基本次数:即至少需要转动多少次再进入抽奖环节
    prize: 0,   // 中奖位置
    runs_now: 0,//当前已跑步数
    last_index:0,//停下来的中奖位置
    toastHide: true,//弹层是否展示
    toastPrize: false,//是否弹出中奖弹框
    isGetPrize: true,//是否中奖
  },
//开始抽奖
  startGame: function(e) {
    let _this = this;

    _this.data.runs_now = 0;
    _this.data.speed = 40;
    wx.request({
      url: 'test.php', //仅为示例,并非真实的接口地址
      data: {
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success (res) {
        _this.setData({
          prize: parseInt(res.priceType.charAt(1)),
          lastNum: res.priceCount
         })
        _this.startRoll();
      }
    })
  },
  //开始抽奖动画
  startRoll: function () {
    let _this = this;
    _this.data.myInterval = setTimeout(function () { _this.startRoll(); }, _this.data.speed);
    const count_num = _this.data.count * _this.data.cycle + _this.data.prize + (_this.data.count - _this.data.last_index);
    _this.data.runs_now++;//已经跑步数加一
    _this.data.curPosition++;//当前的加一
    //上升期间
    if (_this.data.runs_no <= (count_num/3*2)){
      _this.data.speed -= 30;//加速
      if (_this.data.speed <= _this.data.max_speed) {
        _this.data.speed = _this.data.max_speed;//最高速度为40;
      }
    }
    //抽奖结束
    else if (_this.data.runs_now >= count_num) {
      console.log('cancel')
      clearTimeout(_this.data.myInterval);
      _this.data.click = true;
      _this.data.last_index = _this.data.curPosition;
      let timer = setTimeout(function () {
        let isGetPrize;
        if (_this.data.prize == 7) {
          isGetPrize = false
        } else {
          isGetPrize = true
        }
        _this.setData({
          toastHide: false,
          toastPrize: true,
          isGetPrize
        })
        clearTimeout(timer)
      }, 500)
    }
    //下降期间
    else if (count_num - _this.data.runs_now <= 10) {
      _this.data.speed += 20;
    }
    //缓冲区间
    else {
      _this.data.speed += 10;
      if (_this.data.speed >= 100) {
        _this.data.speed = 100;//最低速度为100;
      }
    }
    if (_this.data.curPosition > _this.data.count) {//判定!是否大于最大数
      _this.data.curPosition = 1;
    }
    _this.setData(_this.data);
    
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 抽奖小程序主要功能是为服务商提供营销服务,上线至今,同类型产品众多。本篇文章选取了五个具有代表性的抽奖小程序,分别...
    叶安宁阅读 4,181评论 3 30
  • 晚自习回到家已八点了,刚进家门,儿子就问我:“老爸,你觉得我现在够不够勇敢?”我当然是肯定的回答:“跟你以前相比...
    闫老师攒股阅读 393评论 0 0
  • 爸爸下班回家开门的时候,怀里没有像往常那样迎来一阵从客厅地板上冲过来的小旋风。 “豆丁?” 一个小脑袋从沙发扶手里...
    我是豆丁妈妈阅读 395评论 0 0
  • 黄花大闺女 又称为黄花幼女、黄花女 指中国民间对未出嫁、未有性生活的少女(16岁至26岁)的俗称,从另一种意义上,...
    袁载誉阅读 1,859评论 2 6
  • 365日更 第43天 在知识爆炸,终身学习时代,人与人之间比拼的不是学与不学,而是知识效率。学习前,想明白学什么、...
    雷秀苹阅读 308评论 0 2