uni-app开发经验分享二十二: uni-app大转盘思路解析

1
2
3
最近在研究uni-app,制作了一个很有意思的集合项目demo,这里给大家分享下大转盘的前端设计思路
 
需求案例:大转盘抽奖

线上demo查看:

 

 案例效果:

 制作思路:

1
前端大转盘使用css3动画来做,在开始做的时候,我思路上碰到一个问题,抽奖结果是我前端给后台还是后台给我,最后我发现,只有后台传结果给前台才能实现代码的数据闭环,那么按照这个思路,前端需要处理的只是对后台返回的接口来对前端进行数据处理和特效展示。

主要代码:

data部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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
            }

抽奖代码方法部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
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[index].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[index].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
        });
    }
}

如果想要全部代码,欢迎和我联系获取demo源码,希望这个思路对你有所帮助,一起进步。


__EOF__

  • 本文作者: 林恒
  • 本文链接: https://www.cnblogs.com/smileZAZ/p/14658884.html
  • 关于博主: 评论和私信会在第一时间回复。或者直接私信我。
  • 版权声明: 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
  • 声援博主: 如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。
  • posted @   林恒  阅读(1562)  评论(8编辑  收藏  举报
    编辑推荐:
    · Java 中堆内存和栈内存上的数据分布和特点
    · 开发中对象命名的一点思考
    · .NET Core内存结构体系(Windows环境)底层原理浅谈
    · C# 深度学习:对抗生成网络(GAN)训练头像生成模型
    · .NET 适配 HarmonyOS 进展
    阅读排行:
    · 本地部署 DeepSeek:小白也能轻松搞定!
    · 如何给本地部署的DeepSeek投喂数据,让他更懂你
    · 从 Windows Forms 到微服务的经验教训
    · 李飞飞的50美金比肩DeepSeek把CEO忽悠瘸了,倒霉的却是程序员
    · 超详细,DeepSeek 接入PyCharm实现AI编程!(支持本地部署DeepSeek及官方Dee
    又是一年情人节,2025年找到对象了嘛~
    点击右上角即可分享
    微信分享提示