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

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+订阅！

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

IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...
微信小程序-转盘抽奖
微信小程序-转盘抽奖代码: lucky-draw.wxss: .lucky_draw_zp{ width: 502rpx; height: 502rpx; margin: 0 auto; positi ...
微信小程序的抽奖页面
微信小程序的抽奖页面做一个1-10的微信小程序抽奖界面,随机到6和8会显示中奖信息! 点开始按钮开始执行,点结束按钮结束抽奖并且判断是否中奖 wxml代码: <view>{{title} ...
微信小程序圆盘抽奖（扇形画圆）
微信小程序圆盘抽奖(扇形画圆) 前言提示:这里可以添加本文要记录的大概内容: 例如:领导安排做一个微信小程序的转盘抽奖,要求可以复用,动态的修改抽奖的板块个数,由于是第一次做微信小程序踩了很多的坑, ...
【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）
上图话不多说直接上图,抽奖是顺时针又快变慢(还原抽奖的动画)进行抽奖,抽奖的几率都是随机源码接下来展示的就是微信小程序中的九宫格抽奖说明适用范围抽奖逻辑只是原生JS,通过数据进行驱动,因此 ...
微信小程序——翻牌抽奖功能
目录前言一.效果展示二.主要代码 1.wxml主要代码: 2.wxss主要代码 3.js主要代码 4.app.js主要代码三.实现思路及注意点 1.洗牌功能实现方法 2.翻牌功能实现方式 3. ...
京麦微信小程序圣诞抽奖项目的架构设计
来源: linkedkeeper.com 作者:肖依云,热爱技术,熟悉Struts2.Spring.Spring MVC等常用开源框架,对开发分布式.高并发系统有一定的学习和研究.正在学习大数据和AI ...
京麦微信小程序圣诞抽奖项目总结
肖依云,2017年加入京东,目前就职于京东商城京麦平台组,从事京东商家开放平台的相关开发工作. 该项目的主要功能特点是类似于一个秒杀系统,存在短时间高并发问题,在拿到项目需求后,我们对该项目进行了两版 ...
微信小程序本地调试时图标闪烁问题
有些页面加了icon之后,编译的时候会闪一下才变正常,觉得很奇怪,搜了一下没搜到原因,找到了一个解决办法: image{height:auto; } 亲测有用. 来源:微信小程序真机下进入页面时,所有 ...

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

1.实现效果

2.实现原理

2.1 圆点交互闪烁

2.2 抽奖交互

2.3 抽中奖品边框渐变色

3.实现代码

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

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

最新文章

热门文章