微信小程序大转盘抽奖
1、样式
page {width: 100%;height: 100%;
}.container {z-index: 1;padding-top: 220rpx;padding-bottom: 20rpx;box-sizing: border-box;height: 100%;}.plate-wrap-box {position: relative;z-index: 999;width: 500rpx;height: 500rpx;border-radius: 50%;margin: 0 auto 60rpx;
}.plate-border {position: relative;z-index: 9;width: 500rpx;height: 500rpx;background-color: #22a7ca;border-radius: 50%;
}.plate-wrap {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);z-index: 9;width: 440rpx;height: 440rpx;border: 1rpx solid #1f0193;border-radius: 50%;overflow: hidden;margin: auto;
}.plate-light {z-index: 1;width: 500rpx;height: 500rpx;border: none;
}.plate-box {position: absolute;z-index: 1;left: 50%;width: 0;height: 0;font-size: 24rpx;
}.bulb {position: absolute;width: 12rpx;height: 12rpx;left: 50%;top: -242rpx;transform: translate(-50%, 0);border-radius: 50%;background-color: #fdcf03;filter: blur(0.5rpx);
}.text-box {position: absolute;text-align: center;display: inline-block;width: 15rpx;word-break: break-all;top: -200rpx;transform: translate(-100%, 0);font-size: 28rpx;
}.plate-btn-wrap {position: absolute;z-index: 10;left: 50%;top: 50%;transform: translate(-50%, -50%);width: 110rpx;height: 110rpx;border-radius: 50%;
}.plate-btn-wrap::before {content: '';position: absolute;z-index: 9;left: calc(50% - 10rpx);top: -40rpx;transform: translate(-50%, 0);width: 0;height: 0;border-bottom: 80rpx solid #fdcf03;border-left: 20rpx solid transparent;
}.plate-btn-wrap::after {content: '';position: absolute;z-index: 9;left: calc(50% + 10rpx);top: -40rpx;transform: translate(-50%, 0);width: 0;height: 0;border-bottom: 80rpx solid #fdcf03;border-right: 20rpx solid transparent;
}.plate-btn-box {position: relative;z-index: 11;width: 100%;height: 100%;border-radius: 50%;background-color: #ffe401;display: flex;justify-content: center;align-items: center;
}.plate-inner-btn {position: relative;z-index: 999;width: 90rpx;height: 90rpx;border-radius: 50%;background-color: #fdcf03;font-size: 28rpx;font-weight: 800;color: #1f0193;display: flex;justify-content: center;align-items: center;
}
2、wxml文件
<view class="container"><view class="plate-wrap-box"><view class="plate-border" animation="{{ aniData }}"><!-- 转盘以及文字 --><view class="plate-wrap"><view class="plate-box" wx:for="{{ lottery }}" wx:key="" style="top:-{{ (lottery.length - 6)<=2?(36+4*(lottery.length - 6)):50 }}rpx;transform-origin: 50% {{ (lottery.length - 6) <=2?(256+4*(lottery.length - 6)):270 }}rpx;border-top: {{ (lottery.length - 6) <=2?(256+4*(lottery.length - 6)):270 }}rpx solid #{{ index % 2==0?'1f0193':'22a7ca' }};transform:translate(-50%,0) rotate({{ 360 / lottery.length * ( index )}}deg);border-left: {{ 440 / lottery.length * 2 }}rpx solid transparent;border-right: {{ 440 / lottery.length * 2 }}rpx solid transparent;"><text class="text-box" style="color:#{{ index % 2==0?'fcff0c':'fcff0c' }}">{{ item }}</text></view></view><!-- 边框的小灯泡 --><view class="plate-wrap plate-light"><view class="plate-box" wx:for="{{ lottery }}" wx:key="" style="top:-{{ (lottery.length - 6)<=2?(44+4*(lottery.length - 6)):60 }}rpx; transform-origin: 50% {{ (lottery.length - 6) <=2?(294+4*(lottery.length - 6)):310 }}rpx;border-top: {{ (lottery.length - 6) <=2?(294+4*(lottery.length - 6)):310 }}rpx solid transparent;transform:translate(-50%,0) rotate({{ 360 / lottery.length * ( index )}}deg);border-left: {{ 500 / lottery.length * 2 }}rpx solid transparent;border-right: {{ 500 / lottery.length * 2 }}rpx solid transparent;"><view class="bulb"></view></view></view></view><view class="plate-btn-wrap" bindtap="startRollTap"><view class="plate-btn-box"><view class="plate-inner-btn"><text>GO</text></view></view></view></view>
</view>
3、js文件
let canRoll = true, //加控制,防止用户点击两次num = 1, //用在动画上,让用户在第二次点击的时候可以接着上次转动的角度继续转lotteryArrLen = 0, //放奖品的数组的长度lottery = ['奖品1', '奖品2','奖品3']; //放奖品
Page({data: {},onLoad(opt) {this.setPlateData(); //执行设置转盘表面的文字let that = this;let aniData = wx.createAnimation({ //创建动画对象duration: 2000,timingFunction: 'ease'});this.aniData = aniData; //将动画对象赋值给this的aniData属性},setPlateData() { //设置奖品数组lotteryArrLen = lottery.length; //获取奖品数组的长度,用来判断if (lotteryArrLen < 2) { //数组的奖品只有一个,扩展数组的长度到4let evenArr = new Array(4); //创建一个数组,方便操作。for (let i = 0; i < 4; i++) {if (i % 2 == 1) { //这里为什么要取1是为了在默认的界面将指针放在谢谢的地方,防止别人拿着中奖的截图来要奖品evenArr[i] = lottery[0]; //将原数组的内容赋值到新的数组} else {evenArr[i] = '谢谢' //在数组中间隔插入谢谢}}lottery = [...evenArr]; //将整合好的数组赋值给lottery数组} else { //数组中的奖品超过1个,则正常扩展数组,扩展的数组为原来的2倍let dataLen = 0; //用来放原来数组的索引let evenArr = new Array(lotteryArrLen * 2); //创建扩展数组for (let i = 0; i < (lotteryArrLen * 2); i++) {if (i % 2 == 1) {evenArr[i] = lottery[dataLen]; //将原来数组的值赋值给新数组dataLen++; //原来数组的索引加一} else {evenArr[i] = '谢谢'}}lottery = [...evenArr]; //将整合好的数组赋值给lottery数组}lotteryArrLen = lottery.length; //获取新的数组长度this.setData({lottery: lottery //设置好值,用于页面展示})},startRollTap() { //开始转盘let that = this;if (canRoll) {canRoll = false;let aniData = this.aniData; //获取this对象上的动画对象let rightNum = ~~(Math.random() * lotteryArrLen); //生成随机数console.log(`随机数是${rightNum}`);console.log(`奖品是:${lottery[rightNum]}`);aniData.rotate(3600 * num - 360 / lotteryArrLen * rightNum).step(); this.setData({aniData: aniData.export()})num++;canRoll = true;}}
})
4、可能大家会发现一个问题,就是每次回退再次进行抽奖页面扇形面积会增加一倍的奖品数量,后台加上真实数据就可以了。
微信小程序大转盘抽奖相关推荐
- 微信小程序大转盘抽奖概率算法实现
前端时间做了个小程序,用到了抽奖功能,主要在算概率这块卡了一会. 需求:设置奖项等级,并且按照数量的比例进行抽奖. 数据字段: prizename 奖项名字 renumber 奖项数量(这个数量 ...
- 微信小程序,转盘抽奖
微信小程序大转盘 代码源码:https://github.com/yewook/Lottery-turntable 转载于:https://www.cnblogs.com/yewook/p/97171 ...
- 微信小程序大转盘完整代码
微信小程序大转盘完整代码 效果图 wxml片段 <!--index.wxml--> <view class="container"><image sr ...
- 微信小程序实现转盘抽奖
<!--pages/component/lottery/lottery.wxml--> <view class="canvas-container">< ...
- 微信小程序实现转盘抽奖(有效果图)
效果图如下所示 .wxml <view class="index"><view class="xian"></view>&l ...
- 如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图: 上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是"不中奖" ...
- 入门微信小程序[第六篇]微信小程序 -- 大樱桃的安排
经过一番努力,我的直接上司"大樱桃"终于满意了并且交给了我第一个小程序项目. 小乖猴助手 老沙很高兴,终于可以实际的编码了,对于一个100%的码农来说,这是何等的愉悦. 这是一个家 ...
- 微信小程序仿唯聚时代,微信小程序商城,微信小程序大作业源码,小程序源码下载
1.首页 轮播图 大菜单 广告 公告 本周上新 商品分类 广告 商品列表 2.分类 左右分类布局 3.我的 头像 购物订单/置换服务 经销服务 用户服务 源码下载 以上就是功能点分析,下面看效果图: ...
- 在微信小程序上实现抽奖功能
前言 本教程是基于 "apifm-wxapi" 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点: <创建 HelloWorld 项目> <使用 &q ...
- 微信小程序——走马灯式抽奖
目录 前言 一.效果展示 二.实现代码 1.wxml代码 2.wxss代码 3.js代码 4.app.js代码 三.实现思路 说明 前言 (1)利用定时器setInterval每隔固定时间改变下一个格 ...
最新文章
- 国外程序员整理的 C++ 资源大全
- 记与公司内网微博的谈话
- 帆软报表(finereport)点击事件对话框打开
- 腾讯视频怎样开启深色模式保护眼睛
- aws php sns,PHP中的AWS SNS HTTP订阅确认
- python下载文件的三种方法
- 手艺人舍bpftrace而取systemtap的代价和思考
- uboot中往s5p6818的emmc刷写内容
- 网络和internet设置 代理 手动设置无效 | internet选项 代理设置无效无法应用 |internet选项代理修改后无法应用
- setBounds()和setSize的区别
- 基于CH340G的USB芯片的学习
- 自学编程,他从阿里校招生到高级技术专家
- webpack bable
- SSD固态硬盘优化设置图文教程
- 升级 glibc 到2.18版本
- ADB和monkey常用命令笔记
- 微信图片分享支持url,缩略图支持url
- static(静态变量,方法)
- jsp用Echarts做扇形图
- 今天帮某个女生解决 鼠标无法移动,自己乱动的问题
热门文章
- 1227. 飞机座位分配概率
- cocos2dx交叉编译之Android.mk修改
- 从帝王之术中窥探天机
- 学云计算能从事哪些岗位 未来职业发展是什么样
- 2020云栖大会-达摩院
- 耶利哥打不开因计算机丢失,我的电脑游戏打不开说什么应用程序错误。是不是中毒了...
- Poisson 分布
- 微信小程序红包 php,微信小程序实现红包功能(后端PHP实现逻辑)
- 2022: LAVT: Language-Aware Vision Transformer for Referring Image Segmentation
- 《Miss Talk》第04期:对话凯叔讲故事 曲艳颂