微信扫码即可立即体验
上代码
wxml
<view style="height: {{screenHeight}}px;">
<view class="statusBar" style="height: {{customBar}}px;padding-top: {{statusBarHeight}}px;">
<image style="width: 60rpx;height: 60rpx;margin-right: 30rpx;" src="../../static/image/logo.png" mode="aspectFill" />
<text>大大大转盘</text>
</view>
<!-- 弹窗 -->
<page-container bind:leave="leave" round="true" show="{{show}}">
<view class="block">
<view class="block_item">
<view class="block_title">自定义抽签</view>
<view class="scroll">
<view bindtap="chooseItem" class="btn btn1 btnFlex" wx:for="{{myListData}}" wx:key="index" data-index="{{index}}">
<text class="textOpt" > {{item.option}}</text>
<image catchtap="delLine" data-index="{{index}}" class="delpop" src="../../static/image/del.png" mode="aspectFill" />
</view>
<view bindtap="goAdd" class="btn btn1">
去添加
</view>
</view>
</view>
<view class="block_item">
<view class="block_title">热门</view>
<view class="scroll">
<view bindtap="chooseItemTwo" class="btn btn1" wx:for="{{hot}}" wx:key="index" data-index="{{index}}">
{{item.option}}
</view>
</view>
</view>
</view>
</page-container>
<view class="index" style="height: {{screenHeight - customBar}}px;">
<view bindtap="chooseList" class="option" style="color: #fff;margin-bottom: 100rpx;font-weight: bold;">
<text>{{awardsConfig.option}}</text>
<image style="transform: rotate({{show == true?'180deg':'0'}});transition: all 0.3s;" class="dowm" src="../../static/image/dowm.png" mode="aspectFill" />
</view>
<view class="all">
<!-- 指针 -->
<view class="_pointer">
<image class="pointer" src="../../static/image/pointer.png" mode="aspectFit" />
</view>
<view class="square" animation="{{animationData}}">
<!-- 扇形颜色背景 当选项长度等于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.h}}rpx;height:{{size.h/2-2}}rpx;transform-origin:{{size.h/2}}rpx {{size.h/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.h/2}}rpx;height:{{size.h/2}}rpx;transform-origin: {{size.h/2}}rpx {{size.h/2}}rpx"></view>
<view wx:if='{{awardsConfig.awards.length==3}}' class="canvas-item2-after" style="background-color:{{item.color}};width:{{size.h/2}}rpx;height:{{size.h/2}}rpx;transform-origin: {{size.h/2}}rpx {{size.h/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="color: #fff; overflow:hidden;font-size:{{item.name.length>9?'20':'30'}}rpx;line-height:{{item.name.length>9?'20':'30'}}rpx;width:30rpx;padding-top:5rpx;transform: rotate({{index*turnNum}}turn);transform-origin: 50% {{size.h/2-2}}rpx">
<text style='word-break:break-all;'>{{item.name}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="btn" bindtap="addParams" style="display: {{block1}};">
配置参数
</view>
<view class="btn" bindtap="_zhuan" style="display: {{block1}};">
启动
</view>
<view class="btn" bindtap="_stop" style="display: {{block2}};">
重置
</view>
</view>
</view>js
// pages/turnTable.js
var app = getApp(),
timer = null;
var hot = require('../../utils/hot.js')
function randomsort(a, b) {
return Math.random() > .5 ? -1 : 1;
}
Page({
data: {
screenHeight: app.globalData.screenHeight,
statusBarHeight: app.globalData.statusBar, //状态栏
customBar: app.globalData.CustomBar, //顶部导航高度
currentBtn: 1,
hot: hot.sort(randomsort),
hotAll: hot,
awardsConfig: {},
turnNum: '',
size: {
w: 659, // 注意宽要比高小1rpx
h: 660
},
repeat: false, //重复
probability: false, //概率开关,
fastJuedin: true, // 快速转动转盘的开关，默认false
fastTime: 3000, // 转盘快速转动的时间
slowTime: 5000, // 转盘慢速转动的时间
block1: 'block', // 转盘中心的图片标志位，用来显示隐藏
block2: 'none',
block3: 'none',
block4: 'none',
animation: '',
can: true,
myListData: [],
show: false,
},
onUnload() {
clearTimeout(timer)
timer = null
},
onLoad(e) {
if (e.allData) {
this.setData({
can: false
})
this.setData({
awardsConfig: JSON.parse(e.allData)
})
this.init()
} else {
this.setData({
can: true
})
}
},
onShow() {
this.setData({
myListData: wx.getStorageSync('allData') ? JSON.parse(wx.getStorageSync('allData')) : []
})
if (this.data.can) {
if (wx.getStorageSync('allData') && JSON.parse(wx.getStorageSync('allData')).length != 0) {
this.setData({
awardsConfig: JSON.parse(wx.getStorageSync('allData'))[JSON.parse(wx.getStorageSync('allData')).length - 1]
})
this.init()
} else {
this.setData({
awardsConfig: this.data.hot[0]
})
this.init()
}
}
},
// 去添加
goAdd() {
this.setData({
show: false
})
wx.navigateTo({
url: '/subPages/setTurnTable/setTurnTable',
})
},
// 选择自定义列表
chooseItem(e) {
this.setData({
awardsConfig: this.data.myListData[e.currentTarget.dataset.index],
show: false
})
this.init()
},
// 删除自定义
delLine(e) {
console.log(e.currentTarget.dataset.index);
let my = JSON.parse(wx.getStorageSync('allData'))
my.splice(e.currentTarget.dataset.index, 1)
this.setData({
myListData: my,
awardsConfig: my[my.length - 1]
})
wx.setStorage({
key: 'allData',
data: JSON.stringify(my)
})
if (this.data.myListData.length != 0) {
this.init()
} else {
this.setData({
awardsConfig: this.data.hot[0]
})
this.init()
}
},
// 选择热门列表
chooseItemTwo(e) {
this.setData({
awardsConfig: this.data.hotAll[e.currentTarget.dataset.index],
show: false
})
this.init()
},
//打开列表
chooseList() {
this.setData({
show: true
})
},
leave() {
this.setData({
show: false
})
},
// 初始化数据
init() {
var that = this,
awardsConfig = that.data.awardsConfig;
var t = awardsConfig.awards.length; // 选项长度
var e = 1 / t,
i = 360 / t,
r = i - 90;
//i 每项的度数
for (var g = 0; g < t; g++) {
awardsConfig.awards[g].item2Deg = g * i + 90 - i / 2 + "deg"; //当前下标 * 360/长度 + 90 - 360/长度/2
awardsConfig.awards[g].afterDeg = r + "deg";
}
that.setData({
turnNum: e, // 页面的单位是turn
awardsConfig: awardsConfig,
})
},
// 开启概率
// 传 1-100 的数 来设置选项的权重
// 传入0的话就永远摇不到这个选项
_openProbability() {
var that = this,
awards = that.data.awardsConfig.awards,
arr = [];
for (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;
}
}
},
// GO转盘开始转动
_zhuan() {
if (timer) {
clearTimeout(timer)
timer = null
}
var that = this;
var awardsConfig = that.data.awardsConfig;
//>>> 是无符号移位运算符
var r = Math.random() * awardsConfig.awards.length >>> 0
// console.log('是否开启了重复？？？', that.data.repeat);
// if (that.data.repeat) {
// r = that._queryRepeat(r);
// } else {
// /*=============不重复抽取=============*/
// console.log('是否开启了概率？？？', that.data.probability);
// //开启概率 probability这属性必须要传个ture
// if (that.data.probability) {
// r = that._openProbability();
// }
// }
/*=============不重复抽取=============*/
console.log('当前答案选项的下标==', r);
setTimeout(function () {
//要转多少度deg
app.runDegs = app.runDegs || 0, app.runDegs = app.runDegs + (360 - app.runDegs % 360) + (2160 - r * (360 / awardsConfig.awards.length));
var animation = wx.createAnimation({
duration: that.data.fastJuedin ? that.data.fastTime : that.data.slowTime,
timingFunction: "ease"
});
that.animation = animation;
//这动画执行的是差值
//如果第一次写rotate（360） 那么第二次再写rotate（360）将不起效果
animation.rotate(app.runDegs).step(), 0 == r && (app.runDegs = 0);
that.setData({
animationData: animation.export(),
block1: 'none',
block2: 'block',
zhuanflg: true,
})
}, 100);
timer = setTimeout(function () {
that.setData({
animationData: {},
s_awards: awardsConfig.awards[r].name, //最终选中的结果
awardsConfig: awardsConfig,
block1: 'block',
block2: 'none',
zhuanflg: false,
})
wx.showModal({
title: '抽签结果',
content: `${that.data.s_awards}`,
showCancel: false
})
}, that.data.fastJuedin ? that.data.fastTime : that.data.slowTime);
},
// 立即停止
_stop() {
var that = this
var animation = wx.createAnimation({
duration: 1,
timingFunction: "ease"
});
clearTimeout(timer)
timer = null
that.animation = animation;
animation.rotate(0).step(), app.runDegs = 0;
that.setData({
animationData: animation.export(),
block1: 'block',
block2: 'none',
})
},
// 配置参数
addParams() {
wx.navigateTo({
url: '/subPages/setTurnTable/setTurnTable',
})
},
//判断值是否为空
isNull(str) {
if (str == null || str == undefined || str == '') {
return true;
} else {
return false;
}
},
//转盘开始转动或者结速转动后的要传的值
_setatZhuan(e) {
this.triggerEvent('startZhuan', e); // 向父组件传出当前决定的数组数据
},
//当前转盘的结果 e:转盘什么时候能点击的标志位
_myAwards(e) {
this.triggerEvent('myAwards', {
s_awards: this.data.s_awards,
end: e
});
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
return {
title: '大大大转盘',
path: `pages/turnTable/turnTable?allData=${wx.getStorageSync('allData')?JSON.stringify(JSON.parse(wx.getStorageSync('allData'))[JSON.parse(wx.getStorageSync('allData')).length - 1]):[]}`,
imageUrl: '../../static/image/logo.png',
}
}
})wxss
page {
height: 100vh;
width: 100%;
background: #409aa0;
}
.statusBar {
box-sizing: border-box;
padding-left: 50rpx;
color: #fff;
display: flex;
align-items: center;
font-weight: bold;
font-size: 33rpx;
}
.delpop {
width: 40rpx;
height: 40rpx;
}
.btnFlex {
box-sizing: border-box;
display: flex;
justify-content: space-between;
padding: 0 100rpx;
align-items: center;
}
.option {
padding: 20rpx 100rpx;
border-radius: 20rpx;
background: #409aa0;
box-shadow: 20rpx 20rpx 60rpx #368388,
-20rpx -20rpx 60rpx #4ab1b8;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.dowm {
width: 40rpx;
height: 40rpx;
margin-left: 10rpx;
}
.block {
height: 1200rpx;
background-color: #409aa0;
}
.block_item {
width: 100%;
height: 50%;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
color: #fff;
}
.scroll {
width: 100%;
height: 500rpx;
box-sizing: border-box;
overflow: auto;
}
.textOpt {
width: 80%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.btn1 {
width: 80% !important;
margin: 20rpx auto;
box-shadow: 20rpx 20rpx 60rpx #368388,
-20rpx -20rpx 60rpx #4ab1b8 !important;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.index {
display: flex;
align-items: center;
padding-top: 50rpx;
box-sizing: border-box;
flex-direction: column;
text-align: center;
}
.all {
width: 660rpx;
height: 660rpx;
position: relative;
margin-bottom: 20%;
border-radius: 50%;
overflow: hidden;
/* border: 10rpx solid #409aa0; */
background: #409aa0;
box-shadow: 20rpx 20rpx 60rpx #368388,
-20rpx -20rpx 60rpx #4ab1b8;
}
.square {
width: 660rpx;
height: 660rpx;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
._pointer {
position: absolute;
bottom: 55%;
left: 50%;
transform: translate(-50%, 50%);
z-index: 99;
}
.pointer {
width: 100rpx;
height: 100rpx;
}
.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;
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;
}
.gb-wheel-icontent {
position: relative;
display: block;
padding-top: 50rpx;
margin: 0 auto;
text-align: center;
transform-origin: 50% 328rpx;
font-weight: bold;
}
.btn {
background: #409aa0;
box-shadow: 20rpx 20rpx 60rpx #368388,
-20rpx -20rpx 60rpx #4ab1b8;
color: #fff;
width: 50%;
height: 100rpx;
text-align: center;
line-height: 100rpx;
font-size: 35rpx;
border-radius: 50rpx;
font-weight: bold;
margin-bottom: 50rpx;
}适合选择恐惧人群 抽签抓阄来进行决定
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
