微信小程序转盘大抽奖

有需要写个积分抽奖功能，大题思路就有两个，一呢转盘上的内容使用文字，自己调整位置和角度，二呢使用整个的图片，优缺点一目了然。

比较懒就借鉴了第二种：

首先在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 * 360

animation.rotate(rotateAngle).step()

this.setData({

animationData :animation.export(),

deg: rotateAngle

})

wxml部分

<image class='w_img' src="https://o3pvuu23u.qnssl.com/2f9bddd9-bb82-47ed-bd0f-9b1bee4463b8.png"

animation="{{animationData}}" />

</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;

}

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

uniapp 微信小程序转盘指针抽奖
转盘抽奖uniapp小程序,跟搜到的插件转盘旋转不同,我们的需求是中间的指针也就是瓶子旋转,而且要求长摁蓄力液体装满瓶子,松手旋转并且液体慢慢转为空,最后停止在相应的奖品上. 首先考虑蓄力液体装满的问 ...
微信小程序实现大转盘抽奖----踩坑之路
微信小程序实现大转盘抽奖----踩坑之路需求:现在有一个小程序抽奖页面如下,此类抽奖方式为大转盘思路:由服务端获取抽奖次数和奖品,根据服务端的中奖概率来决定是否中奖,最后利用小程序动画将转盘转起来 ...
微信小程序-转盘抽奖
微信小程序-转盘抽奖代码: lucky-draw.wxss: .lucky_draw_zp{ width: 502rpx; height: 502rpx; margin: 0 auto; positi ...
微信小程序期末大作业-天使童装商城
微信小程序期末大作业-天使童装商城,导入即可使用,有轮播图,底部导航,各种童装标签,有首页,分类,优惠券,购物车,个人中心五个导航,适合初学者学习使用,如下图所示:(资源链接在末尾) 资源下载链接:h ...
微信小程序期末大作业记单词小程序适合初学者学习使用
微信小程序期末大作业记单词小程序小程序如下图所示:(下载链接在文末) 点我下载资源 https://download.csdn.net/download/weixin_43474701/59677 ...
网易云易盾推出面向微信小程序的大数据反作弊产品
近日,国内领先的业务风控服务网易云易盾对外推出面向微信小程序的大数据反作弊产品,源于网易20年的核心业务风控技术与全面稳健的策略模型,有机整合了设备指纹.IP画像.规则引擎等八大能力,可广泛应用电商营 ...
微信小程序对接大华摄像头
文章目录微信小程序对接大华摄像头 1.在app.json中声明 2. 使用插件 3.使用自定义组件: 微信小程序对接大华摄像头文档地址:https://open.imoulife.com/book ...
微信小程序期末大作业-蔬菜商城
微信小程序期末大作业-蔬菜商城在这个小程序可以购买各种蔬菜,有四个底部导航栏,轮播图,动态文字,首页,订单,个人中心,分类,购物车五个导航,时候初学者学习使用,如下图所示: 资源下载链接:http ...
微信小程序期末大作业-精品优购商城
微信小程序期末大作业-精品优购商城导入即可运行,有轮播图,各种商品标签,底部导航栏,包含首页,分类,购物车,个人中心四个导航:如下图:(资源链接在末尾) 资源下载链接:https://downloa ...

微信小程序转盘大抽奖

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

最新文章

热门文章