您当前的位置: 首页 > 解决方案

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

  • 作者: admin
  • 发布于 2019-01-11 10:35:34
  • 来源:  
  • 栏目:解决方案

导语: 所有的抽奖都是由后台计算后 <!-- 轮播展示中奖信息区域 --> <swiper autoplay="{{true}}" interval="{{

 

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

 
  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. },
  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. }

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



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部