微信小程序六宫格抽奖

向右看齐 2022-09-13 15:23 177阅读 0赞

用微信小程序做一个抽奖活动  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5pyx56y85YyF_size_12_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5pyx56y85YyF_size_12_color_FFFFFF_t_70_g_se_x_16 1]![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5pyx56y85YyF_size_12_color_FFFFFF_t_70_g_se_x_16 2]  
一轮是6个红包，需要在第三轮听下转动，初始一个随机数在13-18之间随机来进行抽奖

//页面的渲染
    <view class="container">
      
      <view class="box">
        <view class="list-content">
          <block wx:for="{
       {prizeList}}" wx:key="id">
            <view class="list">
              <view class="list_t">
              	//当转动开始后图片跟随当前的下标进行修改
                <image src="{
       {drawIndex==item.index?changeImg:listImg}}" mode="aspectFit"></image>
              </view>
              <view class="list_b">{
       {item.prizeName}}</view>
            </view>
          </block>
        </view>
      </view>
      <button bindtap="startDraw" style="background: #e66013;color: #fff;">抽奖</button>
      
      <view class="award-display" wx:if="{
       {showModel}}" bindtap="closePopup">
        <view class="award-image">
          <image src="{
       {changeImg}}" mode="aspectFit"></image>
          <view class="luck-text" style="color: #fff;">{
       {awardName}}</view>
        </view>
      </view>
    </view>

页面的js

// 获取应用实例
    let timer; 
    let drawIndex = 0; //抽奖过程下标
    
    Component({
      /**
       * 组件的初始数据
       */
      data: {
        // 奖品参数信息
        prizeList: [
          { index: 1, prizeName: '谢谢参与' },
          { index: 2, prizeName: '积分 x20' },
          { index: 3, prizeName: '积分 x5' },
          { index: 6, prizeName: '谢谢参与' },
          { index: 5, prizeName: '商务笔记本' },
          { index: 4, prizeName: '积分 x2' }
        ],
        listImg:'https://img-blog.csdnimg.cn/9ec6866452694effb07ac91961cddd91.png',
        changeImg:'https://img-blog.csdnimg.cn/10c950ac1d6c498fa3ffb8353e4c914c.png',
        drawIndex: null, //抽奖过程
        random:null,    //随机数
        prizeName: null, //抽奖结果下标对应的奖品名称
        showModel: false,  // 是否显示奖品弹窗，默认false不显示
        awardName:'',  // 弹窗显示的奖品名
        time:0      
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
    
        //抽奖操作
        startDraw() {
          var that =this;
          this.againBtn();
          this.data.drawIndex=0;
          this.data.time=0;
          clearInterval(timer);
          timer = setInterval(()=>{
            this.changePrize()
          }, 150);
    
          // 随机将品池
          var random = Math.floor(Math.random() *(5)+13); //在13-18之间取随机数，因为是6个一轮所以第三轮刚好出结果
          this.setData({
            random:random
          })
          setTimeout(() => {
            clearInterval(timer);
            timer = setInterval(() => {
              that.changePrize()
            }, 500);
          }, 1800)
        },
    
        //奖品切换
        changePrize() {
          drawIndex++;
          var time =this.data.time;
            time++;
          drawIndex = drawIndex > 6 ? 1 : drawIndex;
          this.setData({
            time:time,
            drawIndex: drawIndex
          });
          if (this.data.random == this.data.time) {
            clearInterval(timer);
            // 匹配抽到的数据
            var data= this.data.prizeList.filter(function(item){
              return item.index == drawIndex; 
            })
            this.setData({
              showModel: true,
              awardName: data[0].prizeName
            });
          }
        },
    
        //点击再抽一次按钮
        againBtn() {
          drawIndex = 0; //抽奖过程KEY
          this.setData({
            drawIndex: null, // 清空当前商品下标
            random:null,
            awardName: '' // 清空奖品的展示名称
          });
        },
    
        // 关闭弹窗
        closePopup(){
          this.setData({
            showModel: false
          })
        }
      }
    })

抽奖的样式

.list{
      text-align: center;
      margin-bottom: 100rpx;
    }
    .list_t>image{
      width: 200rpx;
      height: 100rpx;
    }
    .list-content{
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      padding: 20rpx;
    }
    .award-display{
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, .7);
    }
    .award-image{
      text-align: center;
      color: #fff;
      margin: 100rpx auto;
    }
    .award-image>image{
      width: 300rpx;
      height: 300rpx;
      margin-bottom: 30rpx;
    }

一个简单的抽奖就完成了

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5pyx56y85YyF_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/d7deed67b18d48dfa47783b887f122db.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5pyx56y85YyF_size_12_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/a0ea1fa5bc2d4fd9a6cc137df1e3260f.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5bCP5pyx56y85YyF,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5pyx56y85YyF_size_12_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/018273d92c1a489e82720b12df488a04.png