淘宝小程序 九宫格抽奖_淘宝详情页九宫格代码

淘宝小程序的九宫格抽奖功能，同理功能代码可根据指定小程序规则调整事件，此逻辑可适配所有小程序功能开发。

效果图：

index.axml

<!-- 九宫格部分 -->
<view class="container_out">
  <view class="container_in">
    <view class="content_out" a:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;">
      <image mode="scaleToFill" a:if="{{index !== indexSelect}}" src="https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/luckdraw/bottom1.png" />
      <image mode="scaleToFill" a:if="{{index === indexSelect}}" src="https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/luckdraw/bottom2.png" />
      <image mode="scaleToFill" src="{{item.imageAward}}" />
    </view>
    <view class="luckdraw_btn">
      <image mode="scaleToFill" src="https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/luckdraw/luckdraw_btn_bg.png" />
      <view class="luckdraw_btn_texe">剩余次数
        <text>{{timesNum}}</text>次</view>
      <view class="luckdraw_btn_nb" a:if="{{isRunning}}" onTap="luckDrawEle"></view>
      <view class="luckdraw_btn_nb" a:if="{{!isRunning}}"></view>
    </view>
  </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

index.acss

page {
  background: #f7f7f7;
}

.bodyCon{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

image{
   width: 100%;
   height: 100%;
}

/* 九宫格 */
.container_out {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  width: 649rpx;
  height: 774rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 20rpx;
 }
  
 .container_in {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 589rpx;
  height: 713rpx;
 }
  
 .content_out {
  position: absolute;
  width: 178rpx;
  height: 218rpx;
 }
 
 .content_out image{
   position: absolute;
   top: 0;
   left: 0;
 }
  
 .luckdraw_btn {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 178rpx;
  height: 218rpx;
 }
 
 .luckdraw_btn_texe{
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 57rpx;
   text-align: center;
   line-height: 57rpx;
   font-size: 20rpx;
   color: #2a2a2a;
 }
 
 .luckdraw_btn view text{
    margin: 0 8rpx;
   font-size: 25.3rpx;
 }
 
 .luckdraw_btn_nb{
  position: absolute;
  top: 0;
  left: 0;
  width: 178rpx;
  height: 218rpx;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

index.js

Page({
  data: {
    indexSelect: 0,//被选中的奖品index
    isRunning: true,//是否正在抽奖
    index: 1,//中奖的索引  这个是拿到后端接口后赋的值，第几个奖品
    times: 3, //转盘转的次数
    imageAward: [
      'https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize1.png?v=1.0.3',
      'https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize2.png?v=1.0.3',
      'https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize3.png?v=1.0.3',
      'https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize4.png?v=1.0.3',
      'https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize5.png?v=1.0.3',
      'https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize6.png?v=1.0.3',
      'https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize7.png?v=1.0.3',
      'https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize8.png?v=1.0.3',
    ],//奖品图片数组
    timesNum: 1, // 抽奖次数 可在拿到后端接口后赋的值，剩余抽奖次数
  },
  onLoad() {
    // 初始化九宫格样式
    this.initStyle();
  },

  async initStyle() {
    //奖品item设置
    let awardList = [];
    //间距,怎么顺眼怎么设置吧.
    let topAward = 0;
    let leftAward = 0;
    for (let j = 0; j < 8; j++) {
      if (j == 0) {
        topAward = 0;
        leftAward = 0;
      } else if (j < 3) {
        topAward = topAward;
        //178是宽，27是间距.下同
        leftAward = leftAward + 178 + 27;
      } else if (j < 5) {
        leftAward = leftAward;
        //218是高,30是间距,下同
        topAward = topAward + 218 + 30;
      } else if (j < 7) {
        leftAward = leftAward - 178 - 27;
        topAward = topAward;
      } else if (j < 8) {
        leftAward = leftAward;
        topAward = topAward - 218 - 30;
      }
      let imageAward = this.data.imageAward[j];
      awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });
    }
    this.setData({
      awardList: awardList
    })
  },

  // 抽奖事件
  async luckDrawEle() {
    const _this = this;
    if (!_this.data.isRunning) return;
    _this.data.isRunning = false;
    if (_this.data.timesNum === 0) {
      my.alert({
        title: '暂无抽奖次数',
      });
      _this.data.isRunning = true;
      return false;
    }
    // 计算剩余次数 可在拿到后端接口后赋的值，剩余抽奖次数
    _this.data.timesNum = _this.data.timesNum - 1;
    _this.setData({
      timesNum: _this.data.timesNum
    })

    let indexSelect = 0
    let i = 0;
    let timer = setInterval(function () {
      indexSelect++;
      //这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度
      i += 30;
      if (i > _this.data.times * 8 * 30 + _this.data.index * 30 - 30) {
        //去除循环
        clearInterval(timer);
        //获奖提示
        setTimeout(() => {
          my.alert({
            title: '中奖索引为：' + _this.data.index,
          });
          _this.data.isRunning = true;
          _this.setData({
            isRunning: _this.data.isRunning
          })
        }, 300)
      }
      indexSelect = indexSelect % 8;
      _this.setData({
        indexSelect: indexSelect
      })
    }, (100 + i))
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

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