微信小程序实现转盘抽奖

<!--pages/component/lottery/lottery.wxml-->
<view class="canvas-container"><view animation="{{animationData}}" class="gb-wheel-content" style='width:{{size-2}}rpx;height:{{size}}rpx;'><!-- 扇形颜色背景 当选项长度等于2或者3时做了特殊处理 --><view class="canvas-list"><view class="canvas-item2" wx:for="{{awardsConfig.awards}}" wx:key="key" style="transform: rotate({{item.item2Deg}});background-color:{{awardsConfig.awards.length==2?item.color:''}};opacity:{{awardsConfig.awards.length==2?item.opacity:awardsConfig.awards.length==3?item.opacity:''}};width:{{size}}rpx;height:{{size/2-2}}rpx;transform-origin:{{size/2}}rpx {{size/2}}rpx"><view class="canvas-item2-after" style="transform: rotate({{item.afterDeg}});background-color:{{item.color}};opacity:{{awardsConfig.awards.length==3?'':item.opacity}};width:{{size/2}}rpx;height:{{size/2}}rpx;transform-origin: {{size/2}}rpx {{size/2}}rpx"></view><view wx:if='{{awardsConfig.awards.length==3}}' class="canvas-item2-after" style="background-color:{{item.color}};width:{{size/2}}rpx;height:{{size/2}}rpx;transform-origin: {{size/2}}rpx {{size/2}}rpx"></view></view></view><!-- 选项内容 --><view class="gb-wheel-list"><view class="gb-wheel-item" data-index="{{index}}" wx:for="{{awardsConfig.awards}}" wx:key='key'><view class="gb-wheel-icontent" style="height:262rpx;overflow:hidden;font-size:{{item.name.length>9?'20':'26'}}rpx;line-height:{{item.name.length>9?'20':'26'}}rpx;width:{{awardsConfig.awards.length > 10 ? '140rpx':'200rpx'}};padding-top:25rpx;transform: rotate({{index*turnNum}}turn);transform-origin: 50% {{size/2-2}}rpx"><text style='word-break:break-all;display:block'>{{item.name}}</text><image src="{{item.img}}" style="width:80rpx;height:100rpx;margin-top:10rpx"></image></view></view></view></view><view class="img-container" style='width:100%;height:{{size}}rpx;'><!-- 转盘中间的按钮 --><image bindtap="_zhuan" src='../../../image/canvas_button_go_unclick.png' style='width:{{size/4.4}}rpx;display:{{block1}};margin-top:16rpx' mode='widthFix'></image><image src='../../../image/canvas_button_go_click.png' style='width:{{size/4.4}}rpx;display:{{block2}};margin-top:16rpx' mode='widthFix'></image><image bindtap="reset" src='../../../image/canvas_button_reset_unclick.png' style='width:{{size/4.4}}rpx;display:{{block3}};margin-top:16rpx' mode='widthFix'></image><image src='../../../image/canvas_button_reset_click.png' style='width:{{size/4.4}}rpx;display:{{block4}};margin-top:16rpx' mode='widthFix'></image></view>
</view>

// pages/component/lottery/lottery.js
// components/zhuanpan/zhuanpan.js
//创建并返回内部 audio 上下文 innerAudioContext 对象
const start = wx.createInnerAudioContext();
const mid = wx.createInnerAudioContext();
const stop = wx.createInnerAudioContext();Component({options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},/*** 组件的属性列表* 用于组件自定义设置   组件的对外属性*/properties: {myProperty: {    // 属性名        myProperty2: String, 简化的定义方式type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）value: '',    // 属性默认 初始值（可选），如果未指定则会根据类型选择一个observer: function (newVal, oldVal, changedPath) {// 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'// 通常 newVal 就是新设置的数据， oldVal 是旧数据}},probability: {type: Boolean, // 概率开关，默认false 随机value: false},musicflg: {type: Boolean, // 转盘声音开关，默认truevalue: true},fastJuedin: {type: Boolean, // 快速转动转盘的开关，默认falsevalue: false},repeat: {type: Boolean, // 重复抽取开关，默认falsevalue: false},size: {type: Number, // 转盘大小，传入宽度即可value: 600},zhuanpanArr: { // 可以切换的转盘选项, 支持多个type: Array,value: [{id: 0,option: '转盘的标题名称',awards: [{id: 0,name: "最多17个选项",  // 选项名color: 'red',         // 选项的背景颜色probability: 10       // 概率 0代表永远也转不到这个选项，数字越大概率也就越大},{id: 1,name: "选项最多填13字", // 超过9个字时字体会变小点color: 'green',probability: 10}]}]},// 限制：最多17个选项， 单个选项最多填10-13个字,多余部分会隐藏awardsConfig: { // 默认的当前转盘选项 type: Object,value: {option: '我的小决定？',awards: [{id: 0,name: "最多17个选项",color: 'red',probability: 0},{id: 1,name: "选项最多填13字",color: 'green',probability: 0}],},observer: function (newVal, oldVal, changedPath) {if (newVal) {this.switchZhuanpan(newVal, true);}}}},/*** 私有数据,组件的初始数据* 可用于模版渲染   */data: {animationData: {}, // 转盘动画zhuanflg: false,   // 转盘是否可以点击切换的标志位fastTime: 7600,    // 转盘快速转动的时间slowTime: 3900,    // 转盘慢速转动的时间runDegs: 0,        // 转盘旋转了多少圈timer: null,       // 清除转盘的时间clearTimeout(timer)block1: 'block',   // 控制显示或隐藏转盘中心的图片block2: 'none',block3: 'none',block4: 'none'},//组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用 setDatacreated: function () { },// 组件生命周期函数，在组件实例进入页面节点树时执行attached: function () {console.log('===============attached===============');start.src = 'https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/start.mp3'; // 转盘开始转动的音乐mid.src = 'https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/mid.mp3';     // 快速决定时，转盘开始转动的音乐stop.src = 'https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/stop.mp3';   // 转盘停止转动的音乐this.setData({awardsConfig: this.data.zhuanpanArr[0]})// this.initAdards();},/*** 组件的方法列表* 更新属性和数据的方法与更新页面数据的方法类似*/methods: {/** 公有方法*///判断值是否为空isNull(str) {if (str == null || str == undefined || str == '') {return true;} else {return false;}},//初始化数据initAdards() {var that = this, awardsConfig = this.data.awardsConfig;console.log('lotteryData', awardsConfig)var t = awardsConfig.awards && awardsConfig.awards.length || 0;  // 选项长度var e = 1 / t, i = 360 / t, r = i - 90;for (var g = 0; g < t; g++) {awardsConfig.awards[g].item2Deg = g * i + 90 - i / 2 + "deg";//当前下标 * 360/长度 + 90 - 360/长度/2awardsConfig.awards[g].afterDeg = r + "deg";awardsConfig.awards[g].opacity = '1';}that.setData({turnNum: e, // 页面的单位是turnawardsConfig: awardsConfig,})that._change();//向父组件传出当前转盘的初始数据},//重置转盘reset() {var that = this, awardsConfig = that.data.awardsConfig;var animation = wx.createAnimation({duration: 1,timingFunction: "ease"});that.animation = animation;animation.rotate(0).step(), that.data.runDegs = 0;that.setData({animationData: animation.export(),block3: 'none',block4: 'block'})for (let x in awardsConfig.awards) {awardsConfig.awards[x].opacity = '1';}setTimeout(function () {that.setData({block1: 'block',block4: 'none',awardsConfig: awardsConfig,})}, 300)},//父组件需要切换当前转盘的选项//如果有需要切换不同转盘的选项时，可以调用这方法//data: 转盘的数据//flag: 当转盘在转动过程中如果你想停止的话，可以传个true值，默认可不传switchZhuanpan(data, flag) {this.setData({awardsConfig: data,block1: 'block',block1: 'none',block3: 'none',block4: 'none',zhuanflg: false,})this.initAdards();if (flag) {this.reset();clearTimeout(this.data.timer);start.stop();mid.stop();stop.stop();wx.removeStorageSync('repeatArr');}},/** 内部私有方法建议以下划线开头* triggerEvent 用于触发事件,过triggerEvent来给父组件传递信息的* 写法： this.triggerEvent('cancelEvent', { num: 1 })  // 可以将num通过参数的形式传递给父组件*/// GO转盘开始转动_zhuan() {var that = this, awardsConfig = that.data.awardsConfig, runDegs = that.data.runDegs;//>>> 是无符号移位运算符var r = Math.random() * awardsConfig.awards.length >>> 0, runNum = 8;// 根据尹工的逻辑，这里的r的值从后端获取，不需要我来计算/*=============不重复抽取=============*/if (that.data.repeat) {r = that._queryRepeat(r);} else {wx.removeStorageSync('repeatArr');console.log('是否开启了概率？？？', that.data.probability);//开启概率 probability这属性必须要传个tureif (that.data.probability) {r = that._openProbability();}}/*=============不重复抽取=============*/console.log('当前答案选项的下标=====', r);setTimeout(function () {//转盘开始转动音乐that.data.musicflg ? that.data.fastJuedin ? mid.play() : start.play() : '';//要转多少度degrunDegs = runDegs || 0, runDegs = runDegs + (360 - runDegs % 360) + (2160 - r * (360 / awardsConfig.awards.length));var animation = wx.createAnimation({duration: that.data.fastJuedin ? that.data.slowTime : that.data.fastTime,timingFunction: "ease"});that.animation = animation;//这动画执行的是差值 //如果第一次写rotate（360） 那么第二次再写rotate（360）将不起效果animation.rotate(runDegs).step(), 0 == r && (runDegs = 0);that.setData({animationData: animation.export(),block1: 'none',block2: 'block',zhuanflg: true,})that._setatZhuan(true);}, 100);that.setData({timer: setTimeout(function () {//转盘停止后，答案区域高亮显示，其他区域增加透明度for (let x in awardsConfig.awards) {if (x != r) {awardsConfig.awards[x].opacity = '0.3';} else {awardsConfig.awards[x].opacity = '1';}}//转盘停止后的音乐!that.data.musicflg ? '' : stop.play();that.setData({animationData: {},s_awards: awardsConfig.awards[r].name,//最终选中的结果awardsConfig: awardsConfig,block2: 'none',block3: 'block',zhuanflg: false,})that._myAwards();that._setatZhuan(false);}, that.data.fastJuedin ? that.data.slowTime : that.data.fastTime)})},// 开启概率 // 传的数越大概率越大// 传入0的话就永远摇不到这个选项_openProbability() {var that = this, awards = that.data.awardsConfig.awards, arr = [];//5, 5, 20, 10 ,30 ,30, 0for (let i in awards) {if (awards[i].probability != 0) {for (var x = 0; x < awards[i].probability; x++) {//把当前的概率数字 以当前选项下标的形式 都添加都空数组中，然后随机这个数组arr.push(i);}}}var s = Math.floor(Math.random() * arr.length);return arr[s];},//不重复抽取//r:随机数 当前选项进行随机_queryRepeat(r) {var that = this, flag = true, repeatArr = wx.getStorageSync('repeatArr'), repeatArr2 = [], awardsConfig = that.data.awardsConfig;if (that.isNull(repeatArr)) {repeatArr2.push(r), wx.setStorageSync('repeatArr', repeatArr2);return r;} else {var len = awardsConfig.awards.length, r = Math.random() * len >>> 0;for (let i in repeatArr) {if (r == repeatArr[i]) {flag = false;if (repeatArr.length == len) {wx.removeStorageSync('repeatArr');repeatArr2.push(r), wx.setStorageSync('repeatArr', repeatArr2);return r;} else {return that._queryRepeat();//递归调用}}}if (flag) {repeatArr.push(r), wx.setStorageSync('repeatArr', repeatArr);return r;}}},//初始化数据时向外传的参_change() {this.triggerEvent('myData', this.data.awardsConfig);// 向父组件传出当前转盘的数组数据},//当前转盘的结果_myAwards() {this.triggerEvent('myAwards', this.data.s_awards)},//转盘开始转动或者结速转动后的要传的值_setatZhuan(e) {this.triggerEvent('startZhuan', e);},}
})

/* pages/component/lottery/lottery.wxss */
/* components/zhuanpan/zhuanpan.wxss */.canvas-container {margin: 0 auto;position: relative;display: flex;align-items: center;justify-content: center;
}.img-container {margin: 0 auto;position: absolute;display: flex;align-items: center;justify-content: center;left: 0;top: 0;z-index:10;
}.gb-wheel-run {box-shadow: 0 0 5rpx 0rpx rgba(0, 0, 0, 0.98);width: 700rpx;height: 700rpx;border-radius: 50%;border: 30rpx solid #f1ecec;box-sizing: border-box;position: absolute;left: 27rpx;top: -19rpx;opacity: 0.7;
}.gb-wheel-content {position: relative;margin: 0 auto;z-index: 2;width: 660rpx;height: 660rpx;border-radius: 50%;border: 20rpx solid #f1ecec;box-shadow: 0 0 5rpx 0rpx rgba(0, 0, 0, 0.98);opacity: 0.7;overflow: hidden;
}.canvas-list {position: absolute;left: 0;top: 0;width: inherit;height: inherit;z-index: 8;
}.canvas-item2 {position: absolute;left: 0px;top: 0;width: 660rpx;height: 328rpx;color: #e4370e;font-weight: bold;transform-origin: 330rpx 330rpx;overflow: hidden;
}.canvas-item2-after {position: absolute;top: 0;left: 0;width: 330rpx;height: 330rpx;transform-origin: 330rpx 330rpx;opacity: 1;
}.gb-wheel-list {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 9;
}.gb-wheel-item {position: absolute;left: 0;top: 0;width: 100%;height: 100%;color: #fff;text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
}.gb-wheel-icontent {position: relative;display: block;padding-top: 50rpx;margin: 0 auto;text-align: center;transform-origin: 50% 328rpx;
}

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

微信小程序，转盘抽奖
微信小程序大转盘代码源码:https://github.com/yewook/Lottery-turntable 转载于:https://www.cnblogs.com/yewook/p/97171 ...
微信小程序大转盘抽奖概率算法实现
前端时间做了个小程序,用到了抽奖功能,主要在算概率这块卡了一会. 需求:设置奖项等级,并且按照数量的比例进行抽奖. 数据字段: prizename 奖项名字 renumber 奖项数量(这个数量 ...
微信小程序实现转盘抽奖(有效果图)
效果图如下所示 .wxml <view class="index"><view class="xian"></view>&l ...
微信小程序大转盘完整代码
微信小程序大转盘完整代码效果图 wxml片段  <view class="container"><image sr ...
如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图: 上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是"不中奖" ...
在微信小程序上实现抽奖功能
前言本教程是基于 "apifm-wxapi" 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点: <创建 HelloWorld 项目> <使用 &q ...
微信小程序——走马灯式抽奖
目录前言一.效果展示二.实现代码 1.wxml代码 2.wxss代码 3.js代码 4.app.js代码三.实现思路说明前言 (1)利用定时器setInterval每隔固定时间改变下一个格 ...
【愚公系列】2022年08月微信小程序项目篇-抽奖轮盘
文章目录前言一.抽奖轮盘 1.标题布局 1.1 CSS 1.2 HTML 1.4 效果 2.轮盘布局 2.1 CSS 2.2 HTML 2.3 效果 3.轮盘分割 3.1 CSS 3.2 HTML ...
微信小程序：九宫格抽奖
废话不多说,先上样板图代码就先wxml文件: <view id="container"><view id="li&quo ...

微信小程序实现转盘抽奖

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

最新文章

热门文章