小程序仿淘宝五级地址选择教程

所有的抽奖都是由后台计算后

1. {{item.name}}{{item.prize}}
2. 得到的，前台只做动画展示

1. const app = getApp();
2. var index = {
3. data:{
4. prizeInfo:[
5. {
6. name:'qiphon',
7. prize:'5元'
8. },
9. {
10. name:'qiphon23423',
11. prize:'53元'
12. },
13. {
14. name:'qipsdfhon',
15. prize:'35元'
16. }
17. ],
18. transformDeg:0, // 旋转角度
19. transition:'all 3s cubic-bezier(0.005, 1.340, 1.000, 0.865)',
20. time:'999s'
21. },
22. onLoad(opt){
23. console.log(opt)
24.  
25. },
26. onReady(){
27. this.animation = wx.createAnimation({
28. timingFunction:'esse-in-out',
29. duration:2000
30. });
31. this.animationDeg = 360;
32. },
33. loadCoupons(){ // 加载获奖信息
34. 欢迎加入全栈开发交流划水交流圈：582735936
35. 面向划水1-3年前端人员
36. 帮助突破划水瓶颈，提升思维能力
37. },
38. doLottery(){ // 抽奖
39. var _this = this;
40. if(this.aniRotate)return;
41. this.aniRotate = true;
42. this.setData({
43. transformDeg:this.data.transformDeg + 360*900,
44. time:'100s ease'
45. })
46. setTimeout(function(){
47. console.log('请求完成'+_this.data.transformDeg) // setTimeout 模拟ajax请求
48. _this.setData({
49. transformDeg:-360*4,
50. time:'3s ease'
51. })
52. 欢迎加入全栈开发交流划水交流圈：582735936
53. 面向划水1-3年前端人员
54. 帮助突破划水瓶颈，提升思维能力
55. setTimeout(function(){
56. console.log('返回结果'+_this.data.transformDeg)
57. _this.setData({
58. transformDeg:360*2 + 0,
59. time:'6s cubic-bezier(0.000, 0.765, 0.000, 0.955)'
60. })
61. setTimeout(function(){
62. _this.aniRotate = false;
63. wx.showModal({
64. title:'中奖信息',
65. content:'恭喜获得奖品'
66. })
67. },6000)
68. },2000)
69. },3000)
70. },
71. }
72. Page(index);

1. .top-banner{
2. background: #fff;
3. padding:20rpx;
4. }
5. .top-banner swiper{
6. height: 50rpx;
7. line-height: 50rpx;
8. }
9. /* 转盘 */
10. .turntable{
11. position: relative;
12. width: 100%;
13. height: 530rpx;
14. }
15. .turntable-bj{
16. display: block;
17. margin:0 auto;
18. width:600rpx;
19. height: 530rpx;
20. }
21. .turntable .arrow{
22. position: absolute;
23. top:0;
24. right:0;
25. left:0;
26. bottom:110rpx;
27. margin:auto;
28. width:93.5rpx;
29. height: 212rpx;
30. }

以上就是本文的全部内容，希望对大家的学习有所帮助。