E企盈营销工具技术服务商 热线:4006-838-530

微信小程序转盘大抽奖

E企盈直播平台营销卖货系统

有需要写个积分抽奖功能,大题思路就有两个,一呢转盘上的内容使用文字,自己调整位置和角度,二呢使用整个的图片,优缺点一目了然。比较懒就借鉴了第二种:首先在js中全局定义://微信提供的创建动画的方法const animation = wx.createAnimation({duration: 6000,timingFunction: ‘ease’})Page({//初始化角度data:{deg:0,animationData:{}}move() {//转盘共有六分,每个60°,所以30,90正指着中间,这都是可调整的,也可以定义在data中让程序自个计算,现在的随机数是为了模拟后端返回的那个中奖号码,let arr = [30,90,150,210,270,330]let madom =Math.floor( Math.random()*6)let index = arr[madom])//从当前角度开始旋转,  并重置与0点位置     7*360设置的多转几圈let rotateAngle = this.data.deg – (this.data.deg % 360) + index + 7 * 360animation.rotate(rotateAngle).step()this.setData({animationData :animation.export(),deg: rotateAngle})},})wxml部分<view class=”rotate_box”><image class=’w_img’ src=”https://o3pvuu23u.qnssl.com/2f9bddd9-bb82-47ed-bd0f-9b1bee4463b8.png”animation=”{{animationData}}” /><view class=”startbox” bindtap=”move”><image class=’start_img’ src=”https://o3pvuu23u.qnssl.com/e36952f5-0458-467b-890c-61941877c0c9.png” /></view></view>wxss部分.startbox{ position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%)}.start_img{width: 120rpx;height: 120rpx;}.w_img{width: 500rpx;height: 500rpx;}.rotate_box{text-align: center;position: relative;} 小程序

E企盈系统专业开发:直播系统,直播平台系统源码,小程序,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530
赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序转盘大抽奖
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏