微信小程序实现抽奖走马灯+圆点闪烁

1.实现效果

2.实现原理

2.1 圆点交互闪烁

• 基于父盒子，小圆点absolute定位，在data中定义一个dotList，for循环，为圆点动态的设置相应的top和left。
• 设置setInterval，每500ms执行一次，将两个圆点的颜色互换。

2.2 抽奖交互

• 奖品数据长度为8，for循环该数组，当index==4的时候，显示抽奖按钮。
• 设置抽奖转动的顺序为 [0, 1, 2, 4, 7, 6, 5, 3]，按照下图顺序进行转到。
• 设置一定的时间之后，转动速度每次加0.5s。

2.3 抽中奖品边框渐变色

• 设置一个当前转动到的索引位置，设置该位置的数据，active为true，激活相应的样式。
• 通过伪元素实现边框圆角渐变色。

3.实现代码

<view class="draw_box flex-row j_c">
  <view class="circle" wx:for="{{dotList}}" wx:key="index" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background: {{(index%2==0)?dotColor1:dotColor2}};"></view>
  <view class="draw_con">
    <view class="flex-row j_b prize_box">
      <block wx:for="{{prize_list}}" wx:key="index">
        <block wx:if="{{index == 4}}">
          <view class="prize_start prize_item">
            <image src="../img/{{start_btn ? 'start_btn.png' : 'start_btn_gray.png'}}" class="lott_btn" mode="aspectFill" bindtap="lottery"></image>
          </view>
        </block>
        <view class="prize_item flex-column {{item.active?'ative':''}}" data-index="{{index}}">
          <view class="prize_img ">
            <image src="{{item.icon}}" mode="aspectFill" />
          </view>
          <text class="text_ellipsis e_text">{{item.name}}</text>
        </view>
      </block>
    </view>
  </view>
</view>

page {
  background: #C9E8FF;
}

.draw_box {
  width: 652rpx;
  height: 569rpx;
  background: rgba(123, 205, 255, 0.89);
  border: 1rpx solid #FFFFFF;
  box-shadow: 0px 5rpx 20rpx rgba(36, 137, 209);
  border-radius: 25rpx;
  margin: 50px auto;
  position: relative;
}

.draw_con {
  width: 588rpx;
  height: 497rpx;
  background: rgba(102, 180, 230, 0.89);
  border-radius: 20rpx;
  padding: 12rpx 10rpx;
  box-sizing: border-box;
  position: relative;
  z-index: 9;
}

/* 小球闪烁点 */
.circle {
  position: absolute;
  display: block;
  border-radius: 50%;
  height: 16rpx;
  width: 16rpx;
  box-shadow: 0px 3rpx 6rpx #3A98D4;
}

.prize_box {
  flex-wrap: wrap;
}

.prize_item {
  width: 180rpx;
  height: 147rpx;
  background: #F7FCFC;
  box-shadow: 0px 3rpx 6rpx #4A99D1;
  border-radius: 37rpx;
  font-size: 25rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #1E82C1;
  margin-bottom: 16rpx;
  box-sizing: border-box;
  padding-top: 10rpx;
}

.prize_img image {
  width: 88rpx;
  height: 88rpx;
  border-radius: 5rpx;
}

.ative {
  position: relative;
  border: 2rpx solid transparent;
  box-shadow: none;
}

.ative::after {
  content: '';
  position: absolute;
  top: -8rpx;
  bottom: -8rpx;
  left: -8rpx;
  right: -8rpx;
  background: linear-gradient(0deg, #FFCD1E, #FFEFB7);
  z-index: -1;
  border-radius: 34rpx;
}

.e_text {
  width: 80%;
  text-align: center;
}

.prize_start {
  padding-top: 0 !important;
  background: none;
}

.lott_btn {
  width: 100%;
  height: 100%;
}

4.完整代码，尽在公众号’苏苏的bug’,更多小程序demo，关注苏苏的码云，如果对你有用，欢迎您的star+订阅！