用微信小程序编写抽奖大转盘

首先我们要先绘制出转盘布局，比如8项奖品转盘。基本布局思路：

1. 8个产品块采用相对或绝对定位，先将8个产品固定在转盘中心位置。

2. 每个产品块包括图片和文字，做好角度偏移，例如360°/8，第一个产品偏移角度。

3. 计算x ,y 轴偏移量，这里使用translate()方法，你也可以用margin。由于每个角度直线位移一致，水平角度平移长度设为z，那么其它角度上的横向纵向偏移，分别用z*sin(...)和z*cos(...)三角函数求值。

接着如何与后台数据交互问题：拿到获奖产品id，在转盘排布中找到对应序列，通过这个序列调用对应指针指向角度的class，这里与class与序列形成关联，方便调用。

 this.setData({chanceNum: chanceNum - 1,  //抽奖后可抽奖次数-1turntableN: 'turntable-' + index,  drawPrize: prize,drawPicture: picture,   //获奖后展示的产品图drawProduct: product,drawCode: code});setTimeout(() => {this.setData({shade: 1,     //转盘结束后显示获奖产品的遮罩层sd: 1});_this.getPrizeList(1,true);    //flag=t

用微信小程序编写抽奖大转盘相关推荐

微信小程序项目实例——幸运大转盘
微信小程序项目实例--幸运大转盘文章目录微信小程序项目实例--幸运大转盘一.项目展示二.抽奖页三.领奖页文末:项目代码项目代码见文字底部,点赞关注有惊喜一.项目展示幸运大转盘是一个简 ...
微信小程序开发之大转盘仿天猫超市抽奖
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式. ...
010 - 微信小程序开发之大转盘仿天猫超市抽奖
天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式. ...
微信小程序开发之大转盘抽奖
上代码: 1.index.wxml <view class="container-out"><view class="circle" wx:f ...
微信小程序实现抽奖大轮盘
最近遇到做活动抽奖要用转盘,记录下做个笔记. 最终效果图: xml部分: <view class="draw-container"><view class=&qu ...
IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...
微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期数据绑定(核心知识) 数据绑定的运算与逻 ...
微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
微信小程序圆盘抽奖（扇形画圆）
微信小程序圆盘抽奖(扇形画圆) 前言提示:这里可以添加本文要记录的大概内容: 例如:领导安排做一个微信小程序的转盘抽奖,要求可以复用,动态的修改抽奖的板块个数,由于是第一次做微信小程序踩了很多的坑, ...

用微信小程序编写抽奖大转盘

用微信小程序编写抽奖大转盘相关推荐

最新文章

热门文章