uni-app开发经验分享二十二： uni-app大转盘思路解析
<div class="cnblogs_Highlighter"><pre class="brush:csharp;gutter:true;">最近在研究uni-app，制作了一个很有意思的集合项目demo，这里给大家分享下大转盘的前端设计思路
需求案例：大转盘抽奖</pre>
</div>
<p>线上demo查看：</p>
<p><img src="https://img2020.cnblogs.com/blog/2149129/202104/2149129-20210414170205922-629254532.png" alt="" loading="lazy"></p>
<p> </p>
<p> 案例效果：</p>
<p><img src="https://img2020.cnblogs.com/blog/2149129/202104/2149129-20210414171101493-1977668075.png" alt="" loading="lazy"></p>
<p> 制作思路：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">前端大转盘使用css3动画来做，在开始做的时候，我思路上碰到一个问题，抽奖结果是我前端给后台还是后台给我，最后我发现，只有后台传结果给前台才能实现代码的数据闭环，那么按照这个思路，前端需要处理的只是对后台返回的接口来对前端进行数据处理和特效展示。</pre>
</div>
<p>主要代码：</p>
<p>data部分：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">return {
imgUrl: app.appImg,
url: app.url,
indicator: false,
autoplay: true,
interval: 2000,
duration: 500,
dianimage: 0,
bgtimer: null,
domearr: [
{
title:'现金大奖',
id:1,
img:'#'
},
{
title:'积分大奖',
id:2,
img:'#'
},
{
title:'优惠券大奖',
id:3,
img:'#'
},
{
title:'赠品手机',
id:4,
img:'#'
},
{
title:'谢谢惠顾',
id:0,
img:'#'
},
{
title:'谢谢惠顾',
id:0,
img:'#'
},
{
title:'谢谢惠顾',
id:0,
img:'#'
},
{
title:'谢谢惠顾',
id:0,
img:'#'
}
],
swiperarr: [{
title:'恭喜 樱桃小丸子 抽到88元现金红包'
},
{
title:'恭喜 用户aaa 抽到77元现金红包'
}
],
mainname: 'kai',
endname: 't',
frequency:5,
mainbind :false
}</pre>
</div>
<p>抽奖代码方法部分：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"> btnFun(){
var that = this;
if(that.mainbind == false){
if(that.frequency== 0){
uni.showToast({
title: '你已无抽奖次数',
icon:"none",
duration: 2000
});
}else{
that.mainbind = true;
that.mainname = 'kai';
that.endname = 't';
var index = parseInt(Math.random() * 8);
that.mainname = 'kai'+(index+1);
setTimeout(()=>{
that.endname = 't'+(index+1);
that.frequency = that.frequency - 1;
if(that.domearr.id == 0){
uni.showModal({
title: '没有中奖，请再接再厉！',
content: '谢谢惠顾',
success: function (res) {
that.mainbind = false;
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}else{
uni.showModal({
title: '恭喜你中奖了！',
content: that.domearr.title,
success: function (res) {
that.mainbind = false;
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
}
},3900);
}
}else{
uni.showToast({
title: '请不要多次点击',
icon:"none",
duration: 2000
});
}
}</pre>
</div>
<p>如果想要全部代码，欢迎和我联系获取demo源码，希望这个思路对你有所帮助，一起进步。</p><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/14658884.html
頁:
[1]