精华内容
下载资源
问答
  • 微信小程序中实现大转盘抽奖,该资源包括图片和相应的代码。适合微信小程序的初级者入手学习。小程序 九宫格 抽奖,已测试,可用。直接下载替换相关文件即可。
  • 主要为大家详细介绍了微信小程序实现九宫格抽奖,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序 九宫格抽奖demo 需要自己改些细节
  • 基本实现功能 1,小程序仿天猫超市大转盘 2,九宫格转盘抽奖 3,积分抽奖 4,抽到的积分随机生成 5,抽奖结果可以同步到服务器(小程序云开发后台)
  • 因公司需求要做一个小程序九宫格抽奖,但是一块又没有合适的插件,于是到网上看到一个,还挺不错的。 效果图 1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴; 2.抽奖的item也是js控制背景,...

    因公司需求要做一个小程序的九宫格抽奖,但是一块又没有合适的插件,于是到网上看到一个,还挺不错的。

    效果图
    在这里插入图片描述
    1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴;
    2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些.
    3.控制转的圈数是data中times参数
    4.控制转盘停止的位置(索引)是data中index值,这个根据后端接口返回的索引来赋值

    index.wxml

    <view class="container-out">
     <view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view>
     <view class="container-in">
      <view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};">
       <image class="award-image" src="{{item.imageAward}}"></image>
      </view>
      <view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">START</view>
     </view>
    </view>
    

    index.wxss

    .container-out {
      height: 600rpx;
      width: 650rpx;
      background-color: #b136b9;
      margin: 100rpx auto;
      border-radius: 40rpx;
      box-shadow: 0 10px 0 #871a8e;
      position: relative;
     }
      
     .container-in {
      width: 580rpx;
      height: 530rpx;
      background-color: #871a8e;
      border-radius: 40rpx;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
     }
      
     /**小圆球
     box-shadow: inset 3px 3px 3px #fff2af;*/
      
     .circle {
      position: absolute;
      display: block;
      border-radius: 50%;
      height: 20rpx;
      width: 20rpx;
     }
      
     .content-out {
      position: absolute;
      height: 150rpx;
      width: 166.6666rpx;
      background-color: #f5f0fc;
      border-radius: 15rpx;
      box-shadow: 0 5px 0 #d87fde;
     }
      
     /**居中 加粗*/
      
     .start-btn {
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      border-radius: 15rpx;
      height: 150rpx;
      width: 166.6666rpx;
      background-color: #ffe400;
      box-shadow: 0 5px 0 #e7930a;
      color: #f6251e;
      text-align: center;
      font-size: 55rpx;
      font-weight: bolder;
      line-height: 150rpx;
     }
      
     .award-image {
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      height: 140rpx;
      width: 130rpx;
     }
    

    index.js

    Page({
      data: {
       circleList: [],//圆点数组
       awardList: [],//奖品数组
       colorCircleFirst: '#FFDF2F',//圆点颜色1
       colorCircleSecond: '#FE4D32',//圆点颜色2
       colorAwardDefault: '#F5F0FC',//奖品默认颜色
       colorAwardSelect: '#ffe400',//奖品选中颜色
       indexSelect: 0,//被选中的奖品index
       isRunning: false,//是否正在抽奖
       index:5,//中奖的索引  这个是拿到后端接口后赋的值,第几个奖品
       times: 3, //转盘转的次数
       imageAward: [
        'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3140835205,15957850&fm=26&gp=0.jpg',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.wxcha.com%2Ffile%2F201809%2F14%2F43f8777c06.jpg&refer=http%3A%2F%2Fimg.wxcha.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611367449&t=2cbddc7bc57c6ef0a93259ae07ab4977',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Faliyunimg.9ku.com%2Fpic%2Ftoutiao%2F20180803%2Ff26db75f65a134e844dba3039ea30310.jpeg%3Fx-oss-process%3Dimage%2Fresize%2Cw_600%2Cq_60&refer=http%3A%2F%2Faliyunimg.9ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611367469&t=5aa3b8663ad973c87975bd525ab6d059',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170604%2F10c6fad2080f438bae1ce98b0d07eed2_th.jpg&refer=http%3A%2F%2Fimg.mp.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611367487&t=1ed8c7dc90490f71d23bd01c2b994c54',
        'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=300278140,1281156570&fm=26&gp=0.jpg',
        'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3740520249,3092805081&fm=26&gp=0.jpg',
        'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1977138633,2141908040&fm=26&gp=0.jpg',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20180717%2F89d3acd0e3a74beb9c8d4884df45ce97.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1611367545&t=66c93b6725ae705b5ae8bbb7f81754a4',
       ],//奖品图片数组
      },
      
      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 > _this.data.times * 8 * 30 + _this.data.index * 30 - 30) {
        // if (i > 1000) {
         //去除循环
         clearInterval(timer)
         //获奖提示
      
         wx.showModal({
          title: '恭喜您',
          content: '获得了索引为' + (_this.data.index) + "的彭于晏",
          showCancel: false,//去掉取消按钮
          success: function (res) {
           if (res.confirm) {
            _this.setData({
             isRunning: false
            })
           }
          }
         })
        }
        indexSelect = indexSelect % 8;
        _this.setData({
         indexSelect: indexSelect
        })
       }, (100 + i))
      }
     })
    

    以上就是所有的代码了,根据项目需求自作调整

    展开全文
  • 微信小程序九宫格抽奖

    千次阅读 2019-07-25 14:15:56
    //抽奖结束 else if (this.data.runs_now >= count_num) { clearInterval(this.data.myInterval); this.data.roll_flag = true; this.setData({ end_amp: _this.data.amplification_index, start_flag: true ...

    在这里插入图片描述

    js

    Page({
      data: {
        last_index: 0,//上一回滚动的位置
        amplification_index: 0,//轮盘的当前滚动位置
        roll_flag: true,//是否允许滚动
        max_number: 8,//轮盘的全部数量
        speed: 300,//速度,速度值越大,则越慢 初始化为300
        finalindex: 5,//最终的奖励距离当前的位置!不是最后的几等奖!
        myInterval: "",//定时器
        max_speed: 40,//滚盘的最大速度
        minturns: 8,//最小的圈数为2
        runs_now: 0,//当前已跑步数
        luck_num: 3, //获得的奖项的位置
        end_amp:0, //上一次滚动的位置
        start_flag:true,
        lucks: ['积分+5', '谢谢参与', '积分+10', '谢谢参与', '50元卡券', '100元卡券', '谢谢参与', '积分+20'],
    
      },
    
    
    
     //开始滚动
      startrolling: function () {
        let _this = this;
        if (this.data.start_flag==true){
          _this.setData({
            start_flag: false
          })
         //初始化步数
           _this.data.runs_now = 0;
           //当前可以点击的状态下
           if (_this.data.roll_flag) {
             _this.data.roll_flag = false;
             //启动滚盘,
             _this.rolling();
           }
          }
      },
    
    //滚动轮盘的动画效果
      rolling: function (amplification_index) {
        var _this = this;
        this.data.myInterval = setTimeout(function () { _this.rolling(); }, this.data.speed);
        this.data.runs_now++;//已经跑步数加一
        this.data.amplification_index++;//当前的加一
        //获取总步数,接口延迟问题,所以最后还是设置成1s以上
        // var count_num = this.data.minturns * this.data.max_number + this.data.finalindex - this.data.last_index;
        var count_num = this.data.minturns * this.data.max_number + this.data.luck_num - this.data.end_amp;
    
        //上升期间
        if (this.data.runs_now <= (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) {
          clearInterval(this.data.myInterval);
          this.data.roll_flag = true;
         this.setData({
           end_amp: _this.data.amplification_index,
           start_flag: true
         })
    
          if (_this.data.is_selected==0){
            wx.showModal({
              title: '很遗憾',
              content: _this.data.prize_name,
              showCancel: false,
              success(res) {
             
              }
            })
          } else if (_this.data.is_selected == 1){
            wx.showModal({
              title: '恭喜您',
              content: _this.data.prize_name,
              showCancel: false,
              success(res) {
            
              }
            })
          }
        }
        //下降期间
        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.amplification_index > this.data.max_number) {//判定!是否大于最大数
          this.data.amplification_index = 1;
        }
        this.setData(this.data);
    
      },
    })
    
    

    wxml

    
    <view class="luck_box">
    
          <image src="../../static/images/images/29luck_07.png"></image>
    
          <view class="luck">
           <!--左上-->
          <view id="li" class='{{amplification_index===7?"indexli":""}}' >
                <view class="setup_title" >谢谢参与</view>
                <view class="indexli_view"></view>
            </view>
            <!--上-->
           <view id="li" class='{{amplification_index===7?"indexli":""}}' >
                <view class="setup_title" >谢谢参与</view>
                <view class="indexli_view"></view>
            </view>
            <!--右上-->
           <view id="li" class='{{amplification_index===7?"indexli":""}}' >
                <view class="setup_title" >谢谢参与</view>
                <view class="indexli_view"></view>
            </view>
            <!--左-->
            <view id="li" class='{{amplification_index===7?"indexli":""}}' >
                <view class="setup_title" >谢谢参与</view>
                <view class="indexli_view"></view>
            </view>
            <!--开始-->
            <view bindtap="startrolling" class="startrolling" >
               <text>立即</text>
               <text class="st1">抽奖</text>           
            </view>
            <!--右-->
         <view id="li" class='{{amplification_index===7?"indexli":""}}' >
                <view class="setup_title" >谢谢参与</view>
                <view class="indexli_view"></view>
            </view>
            <!--左下-->
            <view id="li" class='{{amplification_index===7?"indexli":""}}' >
                <view class="setup_title" >谢谢参与</view>
                <view class="indexli_view"></view>
            </view>
            <!--下-->
      <view id="li" class='{{amplification_index===7?"indexli":""}}' >
                <view class="setup_title" >谢谢参与</view>
                <view class="indexli_view"></view>
            </view>
            <!--右下-->
            <view id="li" class='{{amplification_index===7?"indexli":""}}' >
                <view class="setup_title" >谢谢参与</view>
                <view class="indexli_view"></view>
            </view>
            <p id="pp"></p>
            </view>
      </view>
    

    wxss

    
    
    .luck_box{
      width:586rpx;
      height:582rpx;
      margin:auto;
      /* margin-top:38rpx; */
      border-radius: 10rpx;
      overflow: hidden;
      box-shadow: 0rpx 5rpx 20rpx #c73c34;
      position: absolute;
      left:0;right:0;top:8vh;
    
    }
    
    
    .luck_box>image{
      display: block;
      width:100%;
      height:100%;
    
    }
    
    .luck_box>.luck{
      width:550rpx;
      height:550rpx;
      position: absolute;
      top:0;
      left:0;
      bottom:0;
      right:0;
      margin:auto;
    }
    
     
    .luck_box>.luck #li{
      background: #fff;
      margin-left:16rpx;
      margin-top:16rpx;
      width: 162rpx;
      height:162rpx;
      box-sizing: border-box;
      display: block;
      float: left;
      text-align: center;
      line-height: 162rpx;
      position: relative;
      border-radius: 10rpx;
        font-size: 28rpx;
        color: #d04011;
    
    }
    
    .luck_box>.luck #li>.setup_title{
     
      width: 162rpx;
      height:162rpx;
      text-align: center;
      line-height: 162rpx;
      border-radius: 10rpx;
        font-size: 28rpx;
        color: #d04011;
        position: absolute;
        top:0;left:0;right:0;bottom:0;margin:auto;
    
    }
    
    .luck_box>.luck #li>.setup_img{
     display: block;
      width: 162rpx;
      height:162rpx;
      margin:auto;
        border-radius: 10rpx;
    
    }
    
    
    .startrolling{
      background: #fff;
      margin-left:16rpx;
      margin-top:16rpx;
      width: 142rpx;
      height:142rpx;
      display: block;
      float: left;
      text-align: center;
      line-height: 142rpx;
      position: relative;
      border-radius: 10rpx;
        font-size: 26rpx;
        color: #fff;
        background: #fc4e40;
        border:10rpx solid #fc7366;
    }
    
    .startrolling>text{
      display: block;
      width:100%;
      height:38rpx;
      text-align: center;
      line-height:38rpx;
      margin-top:30rpx;
      font-size: 36rpx;
      letter-spacing:6rpx;
    }
    
    .startrolling>.st1{
      margin-top:6rpx;
    }
    
    
     
    #pp {
      line-height: 32px;
      color: #9a9a9a;
      text-align: center;
    }
     
    
     
    .indexli .indexli_view {
      position: absolute;
      width: 152rpx;
      height: 152rpx;
      background: rgba(255,255,255,0);
      left: -5rpx;
      top: -5rpx;
      border:10rpx solid #fbaa32;
      border-radius: 15rpx;
    
    }
     
    
    .luck_list{
        margin:auto;
      width:660rpx;
      height:405rpx;
      background: #f86f66;
      border:1rpx solid #fbbab1;
      margin-top:70rpx;
      position: absolute;
      left:0;right:0;
      top:56.3vh;
    
    }
    
    
    .luck_list>image{
      position: absolute;
      width:215rpx;
      height:62rpx;
      left:0;
      right:0;
      margin:auto;
      top:-30rpx;
    }
    
    
    展开全文
  • 描述: 最近在工作中遇到了小程序抽奖的一些页面制作,以前制作网页抽奖的时候,在jQuery插件库谁便找...一、九宫格抽奖: 效果: 思路:    首先是结构上,用弹性布局就可以了,每一个奖品的宽度设置成3分之1,超

    描述:

    最近在工作中遇到了小程序抽奖的一些页面制作,以前制作网页抽奖的时候,在jQuery插件库谁便找一个Demo就可以满足我们的需求了,自己动手写的话不仅会拖慢项目进度,而且写出来的也未必有别人的那么流畅自然。而在小程序中我们就没有这么幸福了(ಥ﹏ಥ),并没有丰富的插件库供给我们使用,所以该写的还得自己动手写。好了,下面是常见的两种抽奖方式:九宫格和转盘,在实际项目中用的还不错,分享给大家。


    一、九宫格抽奖:

    效果:
    在这里插入图片描述

    思路:
       首先是结构上,用弹性布局就可以了,每一个奖品的宽度设置成3分之1,超出3个后让它换行;然后需要定义一个数组用来存放界面的奖品, 因为第五个内容是按钮,所以需要设置一个类型字段用来区分奖品和按钮。又因为需要一个旋转动画的效果,所以需要在奖品数组中设置一个是否已选中的状态字段。
       接着是逻辑上,因为旋转的轨迹是顺时针的,所以得出轨迹的执行顺序数组为:[0, 1, 2, 5, 8, 7, 6, 3],接着我们只需要循环这个数组,在里面设置一个定时器,让它能够在n秒后把第n个奖品的状态改为已选中,这样经过一个循环后,就可以实现动画旋转一圈的视觉效果了;可以旋转一圈后我们可以把这段代码先封装起来,接着我们只需要去循环这段代码,并且再套一个计时器,这样就可以实现旋转多圈的效果了。
       想法是完美的,但是实际项目中还存在很多的因素,比如说旋转每一圈中的衔接时间,调教旋转中的速度,让动画在最后一圈停留在对应的奖品上,这都是开发时要攻破的难关,具体还得认真观看下面代码。

    wxml:

    <view class="body">
      <view class="box">
        <block wx:for="{{prize_arr}}" wx:key="id">
          <!-- 判断是奖品还是抽奖按钮 -->
          <view wx:if="{{item.type=='btn'}}" bindtap="clickPrize" class="prize btn {{isTurnOver?'':'grayscale'}}">
            {{item.name}}
          </view>
          <view wx:else class="prize {{item.isSelected?'selected':''}}">{{item.name}}</view>
        </block>
      </view>
    </view>
    

    wxss:

    .body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
    }
    
    .box {
      display: flex;
      flex-wrap: wrap;
      width: 600rpx;
    }
    
    .box .prize {
      width: 200rpx;
      height: 200rpx;
      line-height: 200rpx;
      text-align: center;
      font-size: 40rpx;
      font-weight: 700;
      color: white;
      background-color: orange;
      border: 2px solid snow;
      box-sizing: border-box;
    }
    
    .box .btn {
      color: tomato;
      background-color: gold;
    }
    
    .box .selected {
      background-color: orangered;
    }
    
    .grayscale {
      filter: grayscale(50%);
    }
    

    js:

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        prize_arr: [
          {id: '1',type: 'prize',name: '奖品1',isSelected: false},
          {id: '2',type: 'prize',name: '奖品2',isSelected: false},
          {id: '3',type: 'prize',name: '奖品3',isSelected: false},
          {id: '4',type: 'prize',name: '奖品8',isSelected: false},
          {id: '5',type: 'btn',name: '按钮',isSelected: false},
          {id: '6',type: 'prize',name: '奖品4',isSelected: false},
          {id: '7',type: 'prize',name: '奖品7',isSelected: false},
          {id: '8',type: 'prize',name: '奖品6',isSelected: false},
          {id: '9',type: 'prize',name: '奖品5',isSelected: false},
        ],
        // 抽奖状态,是否转完了
        isTurnOver: true
      },
    
      // 点击抽奖
      clickPrize() {
        // 如果不在抽奖状态中,则执行抽奖旋转动画
        if (this.data.isTurnOver) {
          // 把抽奖状态改为未完成
          this.setData({
            isTurnOver: false
          })
          // 这里开始假设已经调取后端接口拿到抽奖后返回的ID
          let prize_id = 7;
          // 调用抽奖方法
          this.lottery(prize_id);
        } else {
          wx.showToast({
            title: '请勿重复点击',
            icon: 'none'
          })
        }
      },
    
      // 抽奖旋转动画方法
      lottery(prize_id) {
        console.log('中奖ID:' + prize_id)
        /*
         * 数组的长度就是最多所转的圈数,最后一圈会转到中奖后的位置
         * 数组里面的数字表示从一个奖品跳到另一个奖品所需要的时间
         * 数字越小速度越快
         * 想要修改圈数和速度的,更改数组个数和大小即可
         */
        let num_interval_arr = [90, 80, 70, 60, 50, 50, 50, 100, 150, 250];
        // 旋转的总次数
        let sum_rotate = num_interval_arr.length;
        // 每一圈所需要的时间
        let interval = 0;
        num_interval_arr.forEach((delay, index) => {
          setTimeout(() => {
            this.rotateCircle(delay, index + 1, sum_rotate, prize_id);
          }, interval)
          //因为每一圈转完所用的时间是不一样的,所以要做一个叠加操作
          interval += delay * 8;
        })
      },
    
      /*
       * 封装旋转一圈的动画函数,最后一圈可能不满一圈
       * delay:表示一个奖品跳到另一个奖品所需要的时间
       * index:表示执行到第几圈
       * sum_rotate:表示旋转的总圈数
       * prize_id:中奖后的id号
       */
      rotateCircle(delay, index, sum_rotate, prize_id) {
        // console.log(index)
        let _this = this;
        /*
         * 页面中奖项的实际数组下标
         * 0  1  2
         * 3     5
         * 6  7  8
         * 所以得出转圈的执行顺序数组为 ↓
         */
        let order_arr = [0, 1, 2, 5, 8, 7, 6, 3];
        // 页面奖品总数组
        let prize_arr = this.data.prize_arr;
        // 如果转到最后以前,把数组截取到奖品项的位置
        if (index == sum_rotate) {
          order_arr.splice(prize_id)
        }
        for (let i = 0; i < order_arr.length; i++) {
          setTimeout(() => {
            // 清理掉选中的状态
            prize_arr.forEach(e => {
              e.isSelected = false
            })
            // 执行到第几个就改变它的选中状态
            prize_arr[order_arr[i]].isSelected = true;
            // 更新状态
            _this.setData({
              prize_arr: prize_arr
            })
            // 如果转到最后一圈且转完了,把抽奖状态改为已经转完了
            if (index == sum_rotate && i == order_arr.length - 1) {
              _this.setData({
                isTurnOver: true
              })
            }
          }, delay * i)
        }
      }
    
    })
    
    

    衔接版js: 非第一次转时,会把上一次未跳完的格子转完,逻辑就是点击抽奖时做个标记来判断是否需要把没跳完的格子跳完。

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        prize_arr: [
          {id: '1',type: 'prize',name: '奖品1',isSelected: false},
          {id: '2',type: 'prize',name: '奖品2',isSelected: false},
          {id: '3',type: 'prize',name: '奖品3',isSelected: false},
          {id: '4',type: 'prize',name: '奖品8',isSelected: false},
          {id: '5',type: 'btn',name: '按钮',isSelected: false},
          {id: '6',type: 'prize',name: '奖品4',isSelected: false},
          {id: '7',type: 'prize',name: '奖品7',isSelected: false},
          {id: '8',type: 'prize',name: '奖品6',isSelected: false},
          {id: '9',type: 'prize',name: '奖品5',isSelected: false},
        ],
        /*
         * 数组的长度就是最多所转的圈数,最后一圈会转到中奖后的位置
         * 数组里面的数字表示从一个奖品跳到另一个奖品所需要的时间
         * 数字越小速度越快
         * 想要修改圈数和速度的,更改数组个数和大小即可
         */
        num_interval_arr: [90, 80, 70, 60, 50, 50, 50, 100, 150, 250],
        // num_interval_arr: [90, 80],
        /*
         * 页面中奖项的实际数组下标
         * 0  1  2
         * 3     5
         * 6  7  8
         * 所以得出转圈的执行顺序数组为 ↓
         */
        order_arr: [0, 1, 2, 5, 8, 7, 6, 3],
        // 抽奖状态,是否转完了
        isTurnOver: true,
        // 是否需要复原,把没转完的圈转完
        isRecover: false,
        // 记录上一次抽奖后的奖品id
        prize_id_last: ''
      },
    
      // 点击抽奖
      clickPrize() {
        // 如果不在抽奖状态中,则执行抽奖旋转动画
        if (this.data.isTurnOver) {
          // 把抽奖状态改为未完成
          this.setData({
            isTurnOver: false
          })
          // 这里开始假设已经调取后端接口拿到抽奖后返回的ID
          let prize_id = 7;
          // 调用抽奖方法
          this.lottery(prize_id);
        } else {
          wx.showToast({
            title: '请勿重复点击',
            icon: 'none'
          })
        }
      },
    
      // 抽奖旋转动画方法
      async lottery(prize_id) {
        console.log('中奖ID:' + prize_id)
        // 如果不是第一次抽奖,需要等待上一圈没跑完的次数跑完再执行
        this.recover().then(() => {
          let num_interval_arr = this.data.num_interval_arr;
          let order_arr = this.data.order_arr;
          // 旋转的总次数
          let sum_rotate = num_interval_arr.length;
          // 每一圈所需要的时间
          let interval = 0;
          num_interval_arr.forEach((delay, index) => {
            setTimeout(() => {
              this.rotateCircle(delay, index + 1, sum_rotate, prize_id, order_arr);
            }, interval)
            //因为每一圈转完所用的时间是不一样的,所以要做一个叠加操作
            interval += delay * 8;
          })
        })
      },
    
      /*
       * 封装旋转一圈的动画函数,最后一圈可能不满一圈
       * delay:表示一个奖品跳到另一个奖品所需要的时间
       * index:表示执行到第几圈
       * sum_rotate:表示旋转的总圈数
       * prize_id:中奖后的id号
       * order_arr_pre:表示旋转这一圈的执行顺序
       */
      rotateCircle(delay, index, sum_rotate, prize_id, order_arr_pre) {
        // console.log(index)
        let _this = this;
        // 页面奖品总数组
        let prize_arr = this.data.prize_arr;
        // 执行顺序数组
        let order_arr = []
        // 如果转到最后以前,把数组截取到奖品项的位置
        if (index == sum_rotate) {
          order_arr = order_arr_pre.slice(0, prize_id)
        } else {
          order_arr = order_arr_pre;
        }
        for (let i = 0; i < order_arr.length; i++) {
          setTimeout(() => {
            // 清理掉选中的转态
            prize_arr.forEach(e => {
              e.isSelected = false
            })
            // 执行到第几个就改变它的选中状态
            prize_arr[order_arr[i]].isSelected = true;
            // 更新状态
            _this.setData({
              prize_arr: prize_arr
            })
            // 如果转到最后一圈且转完了,并且是非重置圈,把抽奖状态改为已经转完了
            if (index === sum_rotate && i === order_arr.length - 1 && !this.data.isRecover) {
              _this.setData({
                isTurnOver: true,
                isRecover: true,
                prize_id_last: prize_id
              })
            }
          }, delay * i)
        }
      },
    
      // 复原,把上一次抽奖没跑完的次数跑完
      async recover() {
        if (this.data.isRecover) { // 判断是否需要重置操作
          let delay = this.data.num_interval_arr[0]; // 为了衔接流程,使用第一圈的转速
          // console.log(delay)
          let order_arr = this.data.order_arr;
          // console.log(order_arr)
          let prize_id_last = this.data.prize_id_last; // 上一次抽奖的id
          // console.log(prize_id_last)
          order_arr = order_arr.slice(prize_id_last); // 截取未跑完的格子数组
          // console.log(order_arr)
          return await new Promise(resolve => { // 确保跑完后才去执行新的抽奖
            this.rotateCircle(delay, 1, 1, 8, order_arr); // 第一圈的速度,最多只有一圈,旋转一圈,跑到最后一个奖品为止,未跑完的数组
            setTimeout(() => { // 确保跑完后才告诉程序不用重置复原了
              this.setData({
                isRecover: false,
              })
              resolve() // 告诉程序Promise执行完了
            }, delay * order_arr.length)
          })
        }
      }
    
    })
    

    二、转盘抽奖:

    效果:
    在这里插入图片描述
    思路:
       首先是结构上,我们从设计那拿到psd后,把转盘背景和指针按钮分离成两张图片就好,接着用弹性布局或悬浮布局定一下位置就好。
       接着是逻辑上,我的第一想法使用css3的animation+transform:rotate()来制作,但是想了一下要动态设置旋转的角度,小程序也不好操作dom,所以直接使用官方提供的Animation API来制作了。需要注意一下我这转盘是有6个奖项,所以一个奖项的度数为:60,根据自己的项目,换算一下就好了;另外需要注意的是小程序是否要执行动画是看当前状态和要执行的实例数据间是否存在差值,换句话说就是如果我第一次抽到3等奖,我第二次又是抽中了3等奖,旋转的度数没有变,那么小程序会判断为当前不存在差值,所以会偷懒,直接不转了,具体解决方案看代码。

    wxml:

    <view class="body">
      <view class="box">
        <image class="bg" src="{{bg}}" animation="{{animationRotate}}"></image>
        <image bindtap="lottery" class="arrows {{isTurnOver?'':'grayscale'}}" src="{{arrows}}"></image>
      </view>
    </view>
    

    wxss:

    .body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100vw;
      height: 100vh;
    }
    
    .box {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 600rpx;
      height: 600rpx;
    }
    
    .box .bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    
    .box .arrows {
      position: relative;
      top: -28rpx;
      width: 200rpx;
      height: 249rpx;
    }
    
    .grayscale {
      filter: grayscale(70%);
    }
    

    js:

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        // 转盘奖品背景
        bg: "http://r.photo.store.qq.com/psc?/V14ZaBeY40XWC8/45NBuzDIW489QBoVep5mcT0Lq.gBxwEb6.hf44ibdoBF*Yne9.pzFu6WW1t*k2C7iFgwK3jc0jMvFefvW0IfraslW4FNcfHPYyIdFLecyJ0!/r",
        // 转盘箭头抽奖按钮
        arrows: "http://r.photo.store.qq.com/psc?/V14ZaBeY40XWC8/45NBuzDIW489QBoVep5mcT0Lq.gBxwEb6.hf44ibdoA2KiCwrHNJS*10VP4yg3bnkt2TA7zugdvTHvyHaWr2uplgBObbdubFayYw6e*PbW0!/r",
        // 抽奖状态,是否转完了
        isTurnOver: true
      },
    
      // 点击抽奖按钮
      lottery() {
        // 如果不在抽奖状态中,则执行抽奖旋转动画
        if (this.data.isTurnOver) {
          // 把抽奖状态改为未完成
          this.setData({
            isTurnOver: false
          })
          // 这里开始假设已经调取后端接口拿到抽奖后返回的ID
          let prize_id = 3;
          // 调用旋转动画方法
          this.rotate(prize_id)
        } else {
          wx.showToast({
            title: '请勿重复点击',
            icon: 'none'
          })
        }
      },
    
      // 旋转动画方法
      rotate(prize_id) {
        // 执行完动画所需要的时间
        let _duration = 10000;
        let animationRotate = wx.createAnimation({
          duration: _duration,
          timingFunction: 'ease', //动画以低速开始,然后加快,在结束前变慢
        })
        // 解决二次点击抽奖后不再旋转的问题
        animationRotate.rotate(0).step({
          duration: 1
        })
        /*
         * 旋转的角度
         * 这转盘有6个奖项,所以一个奖项的度数为:360除以6等于60、
         * 要转完一圈 → 60 * 6
         * 为了让动画看起来舒服我设置了20圈 → 60 * 6 * 20
         * 又因为转盘是顺时针旋转的,默认指定奖品1
         * 所以需要减去 → 60 * (prize_id - 1) 方可在最后一圈转到对应的位置
         * 可以根据自己的设计稿奖品的个数进行调整
         * */
        let angle = (60 * 6 * 20) - 60 * (prize_id - 1);
        animationRotate.rotate(angle).step()
        this.setData({
          animationRotate: animationRotate.export()
        })
        // 设置倒计时,保证最后一圈执行完了,才更改状态
        setTimeout(() => {
          this.setData({
            isTurnOver: true
          })
        }, _duration)
      }
    
    })
    

    衔接版js: 会在原来的角度上继续旋转,逻辑就是让角度无线放大,比如第一次抽奖圈转了20圈,那么第二次点击就会转到40圈是位置,实际也是转了20圈上下,因为程序偷懒,跑过的20圈并不会再跑了。

    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        // 转盘奖品背景
        bg: "http://r.photo.store.qq.com/psc?/V14ZaBeY40XWC8/45NBuzDIW489QBoVep5mcT0Lq.gBxwEb6.hf44ibdoBF*Yne9.pzFu6WW1t*k2C7iFgwK3jc0jMvFefvW0IfraslW4FNcfHPYyIdFLecyJ0!/r",
        // 转盘箭头抽奖按钮
        arrows: "http://r.photo.store.qq.com/psc?/V14ZaBeY40XWC8/45NBuzDIW489QBoVep5mcT0Lq.gBxwEb6.hf44ibdoA2KiCwrHNJS*10VP4yg3bnkt2TA7zugdvTHvyHaWr2uplgBObbdubFayYw6e*PbW0!/r",
        // 抽奖状态,是否转完了
        isTurnOver: true,
        // 转的总圈数,最后一圈可能不满
        num_total: 20
      },
    
      // 点击抽奖按钮
      lottery() {
        // 如果不在抽奖状态中,则执行抽奖旋转动画
        if (this.data.isTurnOver) {
          // 把抽奖状态改为未完成
          this.setData({
            isTurnOver: false
          })
          // 这里开始假设已经调取后端接口拿到抽奖后返回的ID
          let prize_id = 3;
          // 调用旋转动画方法
          this.rotate(prize_id)
        } else {
          wx.showToast({
            title: '请勿重复点击',
            icon: 'none'
          })
        }
      },
    
      // 旋转动画方法
      rotate(prize_id) {
        // 执行完动画所需要的时间
        let _duration = 10000;
        let animationRotate = wx.createAnimation({
          duration: _duration,
          timingFunction: 'ease', //动画以低速开始,然后加快,在结束前变慢
        })
        /*
         * 旋转的角度
         * 这转盘有6个奖项,所以一个奖项的度数为:360除以6等于60、
         * 要转完一圈 → 60 * 6
         * 为了让动画看起来舒服我设置了20圈 → 60 * 6 * 20
         * 又因为需要连贯抽取非第一次,所以二次抽奖时会在原来的圈数上自加,
         * 也就成了60 * 6 * num_total,num_total每转完一次都会叠加上自身
         * 又因为转盘是顺时针旋转的,默认指定奖品1
         * 所以需要减去 → 60 * (prize_id - 1) 方可在最后一圈转到对应的位置
         * 可以根据自己的设计稿奖品的个数进行调整
         * */
        let num_total = this.data.num_total;
        let angle = (60 * 6 * num_total) - 60 * (prize_id - 1);
        animationRotate.rotate(angle).step()
        this.setData({
          animationRotate: animationRotate.export()
        })
        // 设置倒计时,保证最后一圈执行完了,才更改状态
        setTimeout(() => {
          this.setData({
            isTurnOver: true,
            num_total: num_total + num_total
          })
        }, _duration)
      }
    
    })
    

    素材:


    附加题:

    概率: 虽然概率这块是放在后端处理,但是它的大概原理是怎么样的呢?接下来我会以我司的抽奖后台方式来和大家探讨。从下面的图中可以看到,每一项奖品都会有一个ID、名称,另外除了奖品数量外还有奖品概率,这就意味着奖品的概率并不一定是按照总数占比来的,并且可以看到红字,一般总概率是要为100(即100%,我猜这样做的目的是为了防止有小数点的情况造成比例不精准)。
    在这里插入图片描述

    ▲抽奖方式可能会有出入的地方:
      1.我司的抽奖方式是这样的,它并不一定是只抽一下的,会按概率的级别依次抽取,每个奖品都会抽一次,比如说先以奖品一的抽奖概率去抽奖品一,如果没有抽中,那么就会去用奖品二的概率抽取奖品二,如果奖品二没有抽中继续往后,如果所有奖品抽过一次都没中,那返回未中提示;
      2.另外,比如我抽到了一等奖,但是一等奖被抽光了,那么此时它会直接向下取去拿奖品二,如果奖品二也没有,会一直往后取。大概意思是我抽中一等奖了,抽完了没有货,那么就有资格直接拿后面级别的奖品,而非重新去抽取。

    下面是我通过制作一些抽奖活动后,自个理解后写的抽奖概率代码,当然并不是说后端的代码就是这样,毕竟后端不止一门语言,而且还会涉及到数据库操作,我这代码仅供大家参考参考,提升提升思维而已。(未抽中和谢谢惠顾的意思是一样的)

    /*
     * 奖品数组
     * num: 该奖品剩余数量
     * probability:  该奖品抽中概率
     */
    let prizeArr = [
    		{id: '0',name: '一等奖',num: 1,probability: 10}, 
    		{id: '1',name: '二等奖',num: 2,probability: 20}, 
    		{id: '2',name: '三等奖',num: 3,probability: 30}, 
    		{id: '3',name: '谢谢惠顾',num: 99999,probability: 40}
    	];
    
    // 定义数组对象排序函数
    function compare(property) {
        return function(a, b) {
            let value1 = a[property];
            let value2 = b[property];
            return value1 - value2; //降序为value2 - value1
        }
    }
    
    // 根据奖品的概率重新排序,因为后续如果抽中靠前的奖品,并且该奖抽完了,会直接向下取奖品
    prizeArr.sort(compare('probability'))
    
    // 得到一个两数之间的随机数
    function getRandomArbitrary(min, max) {
        return Math.random() * (max - min) + min;
    }
    
    // 点击抽奖
    function clickLottery() {
        let sum = prizeArr.reduce((prev, cur) => prev + cur.num, 0); // 剩余奖品的总数
        // console.log(sum)  
        let totalProbability = prizeArr.reduce((prev, cur) => prev + cur.probability, 0); // 全部奖品的总概率
        // console.log(totalProbability)
        if (sum <= 0) {
            console.log("奖品已经抽完了!")
            return
        }
        try {
            prizeArr.forEach((e, index) => {
                let probability = e.probability; // 当前奖品的概率
                // console.log(probability)
                let random_num = getRandomArbitrary(0, totalProbability); // 0到总概率的随机数
                // console.log(random_num)
                if (random_num <= probability) { // 如果随机数小于等于抽奖概率,说明抽中了该项奖品
                    // console.log(e.num)
                    if (e.num > 0) { // 如果当前奖品还有余量,返回改奖项
                        e.num -= 1; // 相应的奖品数减一
                        throw Error(e.name)
                    } else { // 否则无需再抽,直接向下取奖品
                        if (index + 1 < prizeArr.length) { // 如果抽中的不是最后一个奖品,数组未越界
                            for (let i = index + 1; i <= prizeArr.length; i++) {
                                console.log(i)
                                if (prizeArr[i].num > 0) { // 如果后面的奖品还有余量,返回该奖项
                                    prizeArr[i].num -= 1; // 相应的奖品数减一
                                    throw Error(prizeArr[i].name)
                                }
                            }
                        }
                    }
                }
            })
        } catch (e) {
            console.log(e.message)
            return
        }
        console.log("很遗憾未抽中!")
    }
    // 触发抽奖
    clickLottery();
    // console.log(prizeArr)
    

    在这里插入图片描述

    展开全文
  • 接下来展示的就是微信小程序中的九宫格抽奖 说明 适用范围 抽奖逻辑只是原生JS,通过数据进行驱动,因此仍然适用于主流框架Vue,React等 设计思想 数据驱动,可作为组件复用...

    上图

    话不多说直接上图,抽奖是顺时针又快变慢(还原抽奖的动画)进行抽奖,抽奖的几率都是随机
    在这里插入图片描述

    源码

    接下来展示的就是微信小程序中的九宫格抽奖

    说明
    适用范围抽奖逻辑只是原生JS,通过数据进行驱动,因此仍然适用于主流框架Vue,React等
    设计思想数据驱动,可作为组件复用(奖品信息对接数据库,后台调试奖品信息,前端拿到后端数据直接展示即可)

    wxml:

    <!-- 抽奖区域 -->
    <view class="box">
    	<view bindtap="startDraw" class="list {{drawIndex > 0 ? 'grey' : ''}}">抽奖</view>
    	<block wx:for="{{prizeList}}" wx:key="id">
    		<view class="list {{drawIndex == item.index ? 'change_in' : ''}}">
    			<view class="list_t"><image src="{{item.imgsrc}}" mode="aspectFit"></image></view>
    			<view class="list_b">{{item.prizeName}}</view>
    		</view>
    	</block>
    </view>
    
    <button class="again_btn"  bindtap="againBtn">再抽一次</button>
    
    <!-- 奖品弹窗 -->
    <view class="luck-display" wx:if="{{isShowLuck}}">
      <view class="luck-mask" bindtap="closePopup"></view>
      <view class="luck-popup">
      <view class="luck-close" bindtap="closePopup">
        <i class="iconfont icon-shanchu"></i>
      </view>
        <view class="luck-image">
          <image src="{{awardImage}}" mode="aspectFit"></image>
        </view>
        <view class="luck-text">{{awardName}}</view>
      </view>
    </view>
     
    
    

    在这里插入图片描述

    js:

    let timer; 
    let onDrawing = false;  // 是否可进行抽奖标识,默认为false可进行抽奖
    let drawIndex = 0; //抽奖过程KEY
    
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
    
      },
    
        /**
       * 关闭组件样式隔离
       */
      options: {
        styleIsolation: 'apply-shared'
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        // 奖品参数信息
        prizeList: [
          { id: '001', index: 1, imgsrc: 'https://hbimg.huabanimg.com/18b925338313c77ee90c6a0a2f052a7988e10ce515ca7-T4bMZ0_fw658', prizeName: '谢谢参与' },
          { id: '002', index: 2, imgsrc: 'https://hbimg.huabanimg.com/2acfd641286f1a7e4050ca13e207c1d2fc2cbf5f12ca2-W5O1vm_fw658', prizeName: '金币 x20' },
          { id: '003', index: 3, imgsrc: 'https://hbimg.huabanimg.com/72138f8f82134a9099eaa02d5d81fa738519716021e4c-idXlQk_fw658', prizeName: '火箭 x1' },
          { id: '004', index: 4, imgsrc: 'https://hbimg.huabanimg.com/96e0a27d3a6b25dacd7157db6879b63be9e1addd126ac-sMVvOt_fw658', prizeName: '神秘礼盒 x1' },
          { id: '005', index: 5, imgsrc: 'https://hbimg.huabanimg.com/aa694a1e151f2cb8d8583eee9d1cbf0342b5577b953c-O0MFoR_fw658', prizeName: '水晶血瓶 x1' },
          { id: '006', index: 6, imgsrc: 'https://hbimg.huabanimg.com/2fe60709c9479b41ec3eef7fff1101f683b4ad89254af-HNdtDR_fw658', prizeName: '金币 x10' },
          { id: '007', index: 7, imgsrc: 'https://hbimg.huabanimg.com/407d1f6d9aa47e757994d9474dba7257c4c73bd11123a-5juBN1_fw658', prizeName: '水晶钻石 x5' },
          { id: '008', index: 8, imgsrc: 'https://hbimg.huabanimg.com/513f6f7d9f323e7cc3e252444237a84b52a98890c375-LGfXRi_fw658', prizeName: '水晶盒 x1' },
        ],
    
        drawIndex: null, //抽奖过程KEY
        prizeResult: null, //抽奖结果KEY
        prizeName: null, //抽奖结果KEY对应的奖品名称
        isShowLuck: false,  // 是否显示奖品弹窗,默认false不显示
        showAgain: false, //是否抽奖后显示再抽一次按钮
        awardImage: '',  // 弹窗展示的奖品照片
        awardName:'',  // 弹窗展示的奖品名字
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
    
        //抽奖操作
        startDraw() {
          if (onDrawing) {
            return;
          } else {
            onDrawing = true;
          }
    
          clearInterval(timer);
          timer = setInterval(()=>{
            this.changePrize()
          }, 80);
    
          // 随机将品池
          let random = Math.floor(Math.random() * this.data.prizeList.length)
    
          let res = {
            stutus: 1,
            prizeResult: this.data.prizeList[random].index,
            prizeName: this.data.prizeList[random].prizeName,
          }
    
          if (res.stutus == 1) {
            setTimeout( ()=> {
              clearInterval(timer);
              timer = setInterval(()=>{
                this.changePrize()
              }, 200);
    
              setTimeout( ()=> {
                clearInterval(timer);
                timer = setInterval(()=>{
                  this.changePrize()
                }, 420);
                setTimeout( () => {
                  this.setData({
                    prizeResult: res.prizeResult,
                    prizeName: res.prizeName,
                  });
                }, 1000)
              }, 1200)
            }, 1800)
          }
        },
    
        //抽奖过程奖品切换
        changePrize() {
          drawIndex++;
          drawIndex = drawIndex > 8 ? 1 : drawIndex;
    
          this.setData({
            drawIndex: drawIndex
          });
    
          if (this.data.prizeResult == drawIndex) {
            clearInterval(timer);
            let currentAward = this.data.prizeList[this.data.prizeResult - 1]
            this.setData({
              showAgain: true,
              isShowLuck: true,
              awardImage: currentAward.imgsrc,
              awardName: currentAward.prizeName
            });
          }
        },
    
        //点击再抽一次按钮
        againBtn() {
          onDrawing = false;
          drawIndex = 0; //抽奖过程KEY
    
          this.setData({
            drawIndex: null, // 清空抽奖过程KEY
            prizeResult: null, // 清空抽奖结果KEY
            prizeName: null, // 清空抽奖结果KEY对应的奖品名称
            showAgain: false, // 是否抽奖后显示再抽一次按钮
            awardImage: '',  // 清空奖品展示的图片
            awardName: '' // 清空奖品的展示名称
          });
        },
    
        // 关闭奖品弹簧
        closePopup(){
          this.setData({
            isShowLuck: false
          })
        }
      }
    })
    
    

    全部源码看Github仓库 → 微信九宫格抽奖源码


    如果喜欢的小伙伴可以去仓库Fock一下 项目: 微信小程序云音乐 + 博客开发

    直接部署到本地电脑进行体验,有对应的部署文档,觉得不错的给个小星星star,谢谢~

    展开全文
  • 小程序开发者
  • jiugongge 微信小程序九宫格抽奖 效果图较卡顿真实效果是旋转的 介绍地址:
  • 效果图如下所示 .wxml 停止位置: {{item.name}} {{item.name}} 还有{{frequency}}次抽奖机会 .wxss view{ box-sizing: border-box; } .stop{ width: 100%; padding: 0 3%; float: left; overflow: hidden; } .stop>...
  • 主要为大家详细介绍了微信小程序实现多宫格抽奖功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 小程序九宫格抽奖

    2018-08-23 09:40:00
    定时器,设置抽奖状态已经结束 111 clearInterval( this .data.myInterval); 112 // 中奖提示 113 wx.showModal({ 114 title: '提示' , 115 content: that.data.prizeNoName, 116 showCancel: ...
  • 前端九宫格抽奖源代码,把静态数据改成后台api对接,即可使用。前端九宫格抽奖源代码,前端九宫格抽奖源代码
  • 微信小程序实现九宫格抽奖动画

    千次阅读 2020-05-06 18:14:20
    由于工作需求需要在微信小程序实现九宫格抽奖动画,第一反应是想通过定时器setData去切换高亮的奖品,但是频繁setData必定导致小程序卡顿,也可能会出现兼容性问题,其次,定时器setData不方便实现先快后慢的动画...
  • 微信小程序九宫格抽奖

    千次阅读 热门讨论 2017-11-22 18:16:41
    废话不多说,先上样板图 代码就先wxml文件: 一等奖 二等奖 三等奖 八等奖 开始抽奖 四等奖 七等奖 六等奖 五等奖 wxss文件: #container { width: 750rpx; height: 750rpx; } #li, a { background: #fff; margin: ...
  • 不需要数据库,数据都是静态的,两个页面,规则:抽人发红包,先用九宫格抽一个幸运者不需要发红包,再用转盘抽奖,有100,200,300,500,1000,5种红包,每个人发红包总和不能超过2000
  • 立即抽奖 view > view > view > < view class ="pi-item" style ='opacity:{{list[3].opa}}' > < view class ="p-info" > < image class ="p-cover" mode ="aspectFit" src ="{{list[3]....
  • 抽奖大转盘是个很百搭的应用,各种大小app都喜欢挂上这么个东西嗨皮一下。核心功能就是一个概率算法,再结合应用场景做的一些调整。 今天介绍一下《爱豆UP榜》的
  • 小程序九宫格抽奖,只是个demo,需要得自己改下细节 首先是wxml <view class="container"> 停止位置:<input value='{{luckPosition}}' style="width:100%;text-align:center" bindinput='input' ...
  • 1.实现效果 2.代码 码云链接: link.

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 270
精华内容 108
关键字:

小程序九宫格抽奖