• 正文概述
  • 源码介绍

    大转盘抽奖小程序源码,测试依旧可用,无BUG,跑马灯旋转效果,非常酷炫。

    小程序核心代码参考

    //index.js
    //获取应用实例
    var app = getApp()
    Page({
      data: {
        circleList: [],//圆点数组
        awardList: [],//奖品数组
        colorCircleFirst: '#FFDF2F',//圆点颜色1
        colorCircleSecond: '#FE4D32',//圆点颜色2
        colorAwardDefault: '#F5F0FC',//奖品默认颜色
        colorAwardSelect: '#ffe400',//奖品选中颜色
        indexSelect: 0,//被选中的奖品index
        isRunning: false,//是否正在抽奖
        imageAward: [
          '../../images/1.jpg',
          '../../images/2.jpg',
          '../../images/3.jpg',
          '../../images/4.jpg',
          '../../images/5.jpg',
          '../../images/6.jpg',
          '../../images/7.jpg',
          '../../images/8.jpg',
        ],//奖品图片数组
      },
     
      onLoad: function () {
        var _this = this;
        //圆点设置
        var leftCircle = 7.5;
        var topCircle = 7.5;
        var circleList = [];
        for (var i = 0; i < 24; i++) {
          if (i == 0) {
            topCircle = 15;
            leftCircle = 15;
          } else if (i < 6) {
            topCircle = 7.5;
            leftCircle = leftCircle + 102.5;
          } else if (i == 6) {
            topCircle = 15
            leftCircle = 620;
          } else if (i < 12) {
            topCircle = topCircle + 94;
            leftCircle = 620;
          } else if (i == 12) {
            topCircle = 565;
            leftCircle = 620;
          } else if (i < 18) {
            topCircle = 570;
            leftCircle = leftCircle - 102.5;
          } else if (i == 18) {
            topCircle = 565;
            leftCircle = 15;
          } else if (i < 24) {
            topCircle = topCircle - 94;
            leftCircle = 7.5;
          } else {
            return
          }
          circleList.push({ topCircle: topCircle, leftCircle: leftCircle });
        }
        this.setData({
          circleList: circleList
        })
        //圆点闪烁
        setInterval(function () {
          if (_this.data.colorCircleFirst == '#FFDF2F') {
            _this.setData({
              colorCircleFirst: '#FE4D32',
              colorCircleSecond: '#FFDF2F',
            })
          } else {
            _this.setData({
              colorCircleFirst: '#FFDF2F',
              colorCircleSecond: '#FE4D32',
            })
          }
        }, 500)
        //奖品item设置
        var awardList = [];
        //间距,怎么顺眼怎么设置吧.
        var topAward = 25;
        var leftAward = 25;
        for (var j = 0; j < 8; j++) {
          if (j == 0) {
            topAward = 25;
            leftAward = 25;
          } else if (j < 3) {
            topAward = topAward;
            //166.6666是宽.15是间距.下同
            leftAward = leftAward + 166.6666 + 15;
          } else if (j < 5) {
            leftAward = leftAward;
            //150是高,15是间距,下同
            topAward = topAward + 150 + 15;
          } else if (j < 7) {
            leftAward = leftAward - 166.6666 - 15;
            topAward = topAward;
          } else if (j < 8) {
            leftAward = leftAward;
            topAward = topAward - 150 - 15;
          }
          var imageAward = this.data.imageAward[j];
          awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });
        }
        this.setData({
          awardList: awardList
        })
      },
      //开始游戏
      startGame: function () {
        if (this.data.isRunning) return
        this.setData({
          isRunning: true
        })
        var _this = this;
        var indexSelect = 0
        var i = 0;
        var timer = setInterval(function () {
          indexSelect++;
          //这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
          i += 30;
          if (i > 1000) {
            //去除循环
            clearInterval(timer)
            //获奖提示
     
            wx.showModal({
              title: '恭喜您',
              content: '获得了第' + (_this.data.indexSelect + 1) + "个优惠券",
              showCancel: false,//去掉取消按钮
              success: function (res) {
                if (res.confirm) {
                  _this.setData({
                    isRunning: false
                  })
                }
              }
            })
          }
          indexSelect = indexSelect % 8;
          _this.setData({
            indexSelect: indexSelect
          })
        }, (200 + i))
      }
    })

     

    演示截图

    下载地址

    https://pan.baidu.com/s/19sxajjZKBHTkrsr6z4It7Q

    提取码:max5

    1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
    2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
    3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
    4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
    5. 如有链接无法下载、失效或广告,请联系管理员处理!
    6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
    7. 如遇到加密压缩包,默认解压密码为"www.vfaner.com",如遇到无法解压的请联系管理员!

    微范儿 » 大转盘抽奖小程序源码

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
    需要帮助?
    加官方群:71622543,即可向管理员或者群员咨询,看到第一时间回复
    ×
    开通VIP 享更多特权,建议使用QQ登录