账户登录
蒲公英账户可直接登录
还没有账号?免费注册
忘记密码 ?
注册账号
注册的账号通用蒲公英旗下的所有产品
已有账号,直接登录
发布
发布小程序
发布组件
大转盘抽奖
上传者:李泽辰 上传时间:2017-07-03 14:55:53
2384 9
运营 Demo
下载 喜欢
微信小程序大转盘,使用css3创建,非canvas
主要的实现方法就是使用div来画三角形,然后外层使用overflow:hidden。
overflow:hidden
此大转盘最少支持1个奖品,最多支持8个奖品,超过会发生什么事我就不知道了。
另外转盘的大小是设计师给出的比较合适的大小,若要改变大小,请修改.plate-box这个标签的style属性的 top、transform-origin、border-top、border-left、border-right。
.plate-box
top
transform-origin
border-top
border-left
border-right
border-left、border-right的440是转盘的长宽,这两个属性只需要修改成你想要的大小, top、transform-origin、border-top这三个属性在调整的时候,需要将外层的overflow先去掉,然后先调整transform-origin, 一点点地调,让外层的对齐,对齐之后的数字填入top跟border-top即可。
overflow
主要修改2、4、6、8这4种情况就可以了,8个以上的情况跟8个是一样的,因为实现得不是很理想,所以修改转盘大小有很多地方要改动。
使用的时候在lottery传入奖品的数组即可,会自动生成转盘。
项目截图:
发布小程序组件
查看小程序
小程序组件
窝推荐
小程序统计工具
电话:400 866 0210 (工作日 9:00 ~ 18:00)
QQ群:385046190
客服:service@pgyer.com
商务:bd@pgyer.com
版权所有 © 西安点测网络科技有限公司 2014 - 2019 陕ICP备15010407号-4
大转盘抽奖
上传者:李泽辰 上传时间:2017-07-03 14:55:53
2384 9
运营 Demo
下载 喜欢
微信小程序大转盘,使用css3创建,非canvas
主要的实现方法就是使用div来画三角形,然后外层使用
overflow:hidden
。此大转盘最少支持1个奖品,最多支持8个奖品,超过会发生什么事我就不知道了。
另外转盘的大小是设计师给出的比较合适的大小,若要改变大小,请修改
.plate-box
这个标签的style属性的top
、transform-origin
、border-top
、border-left
、border-right
。border-left
、border-right
的440是转盘的长宽,这两个属性只需要修改成你想要的大小,top
、transform-origin
、border-top
这三个属性在调整的时候,需要将外层的overflow
先去掉,然后先调整transform-origin
, 一点点地调,让外层的对齐,对齐之后的数字填入top
跟border-top
即可。主要修改2、4、6、8这4种情况就可以了,8个以上的情况跟8个是一样的,因为实现得不是很理想,所以修改转盘大小有很多地方要改动。
使用的时候在lottery传入奖品的数组即可,会自动生成转盘。
项目截图: