微信小程序抽奖代码可自定义中奖概率.zip

上传者: 28930161 | 上传时间: 2021-07-22 16:39:24 | 文件大小: 445KB | 文件类型: ZIP
微信小程序抽奖轮盘,可定义抽奖概率 从抽奖转盘的图中我们可以看出,抽奖转盘由外圆、扇面抽奖选项、抽奖按钮组成,其中外圆不难实现,大家在处理微信小程序头像的时候估计都已经用过了,那就是利用border-radius:50%来将一个正方形变成圆,这是外圆实现的关键。为了体现立体效果,我们给外圆的border加上阴影,也就是border-shadow样式,这样一处理,外圆的立体效果就出来了。 外圆里面是抽奖的奖项,抽奖奖项由奖品名称和一条线组成,通过将线和奖品名称旋转一定的角度就可以得到界面效果,这里用到的主要功能是:transform: rotate。这里说是线,其实是一个个的view通过设置width宽度和背景色而给人产生的视觉错觉效果。因为每条线的旋转角度不同,所以这个角度是在JS中计算后赋值到前台的。下面是线和抽奖奖项的实现

文件下载

资源详情

[{"title":"( 28 个子文件 445KB ) 微信小程序抽奖代码可自定义中奖概率.zip","children":[{"title":"wxapp_88","children":[{"title":"README.md <span style='color:#111;'> 527B </span>","children":null,"spread":false},{"title":"utils","children":[{"title":"util.js <span style='color:#111;'> 460B </span>","children":null,"spread":false}],"spread":true},{"title":"sitemap.json <span style='color:#111;'> 191B </span>","children":null,"spread":false},{"title":"app.wxss <span style='color:#111;'> 255B </span>","children":null,"spread":false},{"title":"project.config.json <span style='color:#111;'> 1.00KB </span>","children":null,"spread":false},{"title":"image","children":[{"title":"+10.png <span style='color:#111;'> 32.45KB </span>","children":null,"spread":false},{"title":"+100.png <span style='color:#111;'> 106.13KB </span>","children":null,"spread":false},{"title":"+150.png <span style='color:#111;'> 102.95KB </span>","children":null,"spread":false},{"title":"+60.png <span style='color:#111;'> 75.47KB </span>","children":null,"spread":false},{"title":"turn-table-bg.png <span style='color:#111;'> 53.62KB </span>","children":null,"spread":false},{"title":"icon-HL.png <span style='color:#111;'> 429B </span>","children":null,"spread":false},{"title":"+30.png <span style='color:#111;'> 58.98KB </span>","children":null,"spread":false},{"title":"icon.png <span style='color:#111;'> 431B </span>","children":null,"spread":false}],"spread":true},{"title":"LICENSE <span style='color:#111;'> 1.05KB </span>","children":null,"spread":false},{"title":"app.js <span style='color:#111;'> 757B </span>","children":null,"spread":false},{"title":"pages","children":[{"title":"list","children":[{"title":"list.json <span style='color:#111;'> 108B </span>","children":null,"spread":false},{"title":"list.js <span style='color:#111;'> 939B </span>","children":null,"spread":false},{"title":"list.wxss <span style='color:#111;'> 447B </span>","children":null,"spread":false},{"title":"list.wxml <span style='color:#111;'> 603B </span>","children":null,"spread":false}],"spread":true},{"title":"canvas","children":[{"title":"canvas.wxml <span style='color:#111;'> 1.56KB </span>","children":null,"spread":false},{"title":"canvas.json <span style='color:#111;'> 51B </span>","children":null,"spread":false},{"title":"canvas.wxss <span style='color:#111;'> 6.26KB </span>","children":null,"spread":false},{"title":"canvas.js <span style='color:#111;'> 5.52KB </span>","children":null,"spread":false}],"spread":true},{"title":"logs","children":[{"title":"logs.json <span style='color:#111;'> 51B </span>","children":null,"spread":false},{"title":"logs.wxml <span style='color:#111;'> 841B </span>","children":null,"spread":false},{"title":"logs.js <span style='color:#111;'> 381B </span>","children":null,"spread":false},{"title":"logs.wxss <span style='color:#111;'> 688B </span>","children":null,"spread":false}],"spread":true}],"spread":true},{"title":"app.json <span style='color:#111;'> 873B </span>","children":null,"spread":false}],"spread":true}],"spread":true}]

评论信息

免责申明

【只为小站】的资源来自网友分享,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,【只为小站】 无法对用户传输的作品、信息、内容的权属或合法性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论 【只为小站】 经营者是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。
本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二条之规定,若资源存在侵权或相关问题请联系本站客服人员,zhiweidada#qq.com,请把#换成@,本站将给予最大的支持与配合,做到及时反馈和处理。关于更多版权及免责申明参见 版权及免责申明