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

微信小程序抽奖

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

废话不多说,直接上图1.wxml<view class=”canvas-list”><view class=”canvas-item” wx:for=”{{awardsList}}” wx:key=”unique”>  <view class=”canvas-item-text” style=”-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})”>{{item.award}}</view></view></view></view>  <view bindtap=”playReward” class=”canvas-btn {{btnDisabled}}”>抽奖</view></view></view>2.jsPage({//奖品配置awardsConfig: {chance: true,awards: [{ ‘index’: 0, ‘name’: ‘谢谢合作’ },{ ‘index’: 1, ‘name’: ‘电脑’ },{ ‘index’: 2, ‘name’: ‘iPhoneX’ },{ ‘index’: 3, ‘name’: ‘电视机’ },{ ‘index’: 4, ‘name’: ‘冰箱’ },{ ‘index’: 5, ‘name’: ‘彩电’ }]},data: {awardsList: {},animationData: {},btnDisabled: ‘’,},onReady: function (e) {this.drawAwardRoundel();//分享wx.showShareMenu({  withShareTicket: true});},//画抽奖圆盘drawAwardRoundel: function () {var awards = this.awardsConfig.awards;var awardsList = [];var turnNum = 1 / awards.length;  // 文字旋转 turn 值// 奖项列表for (var i = 0; i < awards.length; i++) {  awardsList.push({ turn: i * turnNum + ‘turn’, lineTurn: i * turnNum + turnNum / 2 + ‘turn’, award: awards[i].name });}this.setData({  btnDisabled: this.awardsConfig.chance ? ” : ‘disabled’,  awardsList: awardsList});},//发起抽奖playReward: function () {//中奖indexvar awardIndex = Math.floor(Math.random()*6);console.log(awardIndex);var runNum = 8;//旋转8周var duration = 4000;//时长// 旋转角度this.runDeg = this.runDeg || 0;this.runDeg = this.runDeg + (360 – this.runDeg % 360) + (360 * runNum – awardIndex * (360 / 6))//创建动画var animationRun = wx.createAnimation({  duration: duration,  timingFunction: ‘ease’})animationRun.rotate(this.runDeg).step();this.setData({  animationData: animationRun.export(),  btnDisabled: ‘disabled’});// 中奖提示var awardsConfig = this.awardsConfig;setTimeout(function () {  wx.showModal({    title: ‘恭喜’,    content: ‘获得’ + (awardsConfig.awards[awardIndex].name),    showCancel: false  });  this.setData({    btnDisabled: ”    //是否重复抽取  });}.bind(this), duration);},onShareAppMessage: function () {var that = this;return util.doShare(“大转盘抽奖”, “pages/zp/zp”, that);}})3.WXSS/* pages/zp/zp.wxss /page {/ background: rgb(13, 255, 255); */background-image: url(“https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1547284738960&di=1ba875a76061b51922017354527fe545&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20161227%2Fd4f67ef183f44d71ab50dd6c89976ff2_th.jpg”);}/* 转盘 */.canvas-container {margin: 0 auto;position: relative;width: 300px;height: 300px;border-radius: 50%;box-shadow: 0 2px 3px #333, 0 0 2px #000;}.canvas-content {position: absolute;left: 0;top: 0;z-index: 1;display: block;width: 300px;height: 300px;border-radius: inherit;background-clip: padding-box;background-color: #ffcb3f;}.canvas-element {position: relative;z-index: 1;width: inherit;height: inherit;border-radius: 50%;}.canvas-list {position: absolute;left: 0;top: 0;width: inherit;height: inherit;z-index: 9999;}.canvas-item {position: absolute;left: 0;top: 0;width: 100%;height: 100%;color: #e4370e;font-weight: bold;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);}.canvas-item-text {position: relative;display: block;padding-top: 20px;margin: 0 auto;text-align: center;-webkit-transform-origin: 50% 150px;transform-origin: 50% 150px;}/* 分隔线 */.canvas-line {position: absolute;left: 0;top: 0;width: inherit;height: inherit;z-index: 99;}.canvas-litem {position: absolute;left: 150px;top: 0;width: 1px;height: 150px;background-color: rgba(228, 55, 14, 0.4);overflow: hidden;-webkit-transform-origin: 50% 150px;transform-origin: 50% 150px;}/**抽奖按钮*/.canvas-btn {position: absolute;left: 110px;top: 110px;z-index: 400;width: 80px;height: 80px;border-radius: 50%;color: #f4e9cc;background-color: #e44025;line-height: 80px;text-align: center;font-size: 20px;text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);text-decoration: none;}.canvas-btn::after {position: absolute;display: block;content: ’ ‘;left: 10px;top: -46px;width: 0;height: 0;overflow: hidden;border-width: 30px;border-style: solid;border-color: transparent;border-bottom-color: #e44025;}.canvas-btn.disabled {pointer-events: none;background: #b07a7b;color: #ccc;}.canvas-btn.disabled::after {border-bottom-color: #b07a7b;}小程序

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序抽奖
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏