伟德国际电脑版充值仿淘宝五级地址选择

Rolan 2019-1-11 00:29

所有的抽奖都是由后台计算后 !-- 轮播展示中奖信息区域 -- swiper autoplay="{{true}}" interval="{{1500}}" circular="{{true}}" vertical='{{true}}' block wx:for="{{prizeInfo}}" wx:key="index" swiper-item vi ...

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

  1. <!-- 轮播展示中奖信息区域 -->
  2. <swiper autoplay="{{true}}" interval="{{1500}}" circular="{{true}}" vertical='{{true}}'>
  3. <block wx:for="{{prizeInfo}}" wx:key="index">
  4. <swiper-item>
  5. <view>{{item.name}}{{item.prize}}</view>
  6. </swiper-item>
  7. </block>
  8. </swiper>
  9. </view>
  10. <!-- 轮播结束 抽奖转盘 -->
  11. <view class='turntable' bindtap='doLottery'>
  12. <image class='turntable-bj' style="transition:all {{time?time:'3s ease-in'}}; transform:rotate({{transformDeg + 'deg'}}) " src='../../../img/turntable.png'></image>
  13. <image class='arrow' src='../../../img/arrow.png'>
  14. </image>
  15. </view>得到的,前台只做动画展示
  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. onReady(){
  26. this.animation = wx.createAnimation({
  27. timingFunction:'esse-in-out',
  28. duration:2000
  29. });
  30. this.animationDeg = 360;
  31. },
  32. loadCoupons(){ // 加载获奖信息
  33. 欢迎加入全栈开发交流划水交流圈:582735936
  34. 面向划水1-3年前端人员
  35. 帮助突破划水瓶颈,提升思维能力
  36. },
  37. doLottery(){ // 抽奖
  38. var _this = this;
  39. if(this.aniRotate)return;
  40. this.aniRotate = true;
  41. this.setData({
  42. transformDeg:this.data.transformDeg + 360*900,
  43. time:'100s ease'
  44. })
  45. setTimeout(function(){
  46. console.log('请求完成'+_this.data.transformDeg) // setTimeout 模拟ajax请求
  47. _this.setData({
  48. transformDeg:-360*4,
  49. time:'3s ease'
  50. })
  51. 欢迎加入全栈开发交流划水交流圈:582735936
  52. 面向划水1-3年前端人员
  53. 帮助突破划水瓶颈,提升思维能力
  54. setTimeout(function(){
  55. console.log('返回结果'+_this.data.transformDeg)
  56. _this.setData({
  57. transformDeg:360*2 + 0,
  58. time:'6s cubic-bezier(0.000, 0.765, 0.000, 0.955)'
  59. })
  60. setTimeout(function(){
  61. _this.aniRotate = false;
  62. wx.showModal({
  63. title:'中奖信息',
  64. content:'恭喜获得奖品'
  65. })
  66. },6000)
  67. },2000)
  68. },3000)
  69. },
  70. }
  71. 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. }

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

分享至 : QQ空间
收藏
原作者: 前端全栈开发学习 来自: 简书
  • emaiqi 2019-1-14 08:58
    这什么乱七八糟的。到底是抽奖还是地址选择?