微信小程序大转盘示例源码

Ajax框架/RIA

下载此实例

开发语言：js
实例大小：0.02M
下载次数：29
浏览次数：807
发布时间：2018-08-14
实例类别：Ajax框架/RIA
发布人：wuwu14321
文件格式：.zip
所需积分：2

相关标签：大转盘转盘小程序大程序

网友评论举报投诉收藏该页

下载此实例

实例介绍

[下载地址]

【实例简介】大转盘的背景图可以换成具体的奖项图片

【实例截图】

【核心代码】

//index.js
//获取应用实例
var app = getApp()
var cxt_arc;
var timer;
var n=1;
var timer;
var which = 1;//中奖项
var luck = ["5积分", "5金币", "10积分", "10金币", "谢谢参与", "20金币"];//定义奖项
Page({
  data: {
    animationData:{},//动画
    isclick: "start",//按钮事件
    hiddenModal:true,//弹框是否隐藏
    detail: "恭喜您获得" luck[which-1]//弹框内容
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
  start: function (e) {
    var _this = this;
    n=1;
    this.setData({
      isclick: "stop"
    })
    reset.call(_this);
    timer = setInterval(function () {
      //开始旋转
      star.call(_this);
      //
      n  ;
    }
      , 300);
     //启动动画
    function star() {
      console.log("开始动画.....")
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 300,
        timingFunction: "linear"
      });
      animation.rotate(360*n).step();
      this.setData({
        animationData: animation.export()
      })
    }
    //重置动画
    function reset() {
      console.log("重置动画.....")
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 0,
        timingFunction: "linear"
      });
      animation.rotate(0).step();
      this.setData({
        animationData: animation.export()
      })
    }
  
  },
  stop: function (e) {
    var _this = this;
    this.setData({
      isclick:""
    })
    clearInterval(timer);
    timer = null;
    console.log("结束动画.....");
    sto.call(_this);
    function sto() {
      console.log("重置动画.....")
      var animation = wx.createAnimation({
        transformOrigin: "50% 50%",
        duration: 1.4 * (2160 - (which - 1) * 60),
        timingFunction: "ease-out"
      });
      console.log(Math.random()*60); 
      animation.rotate(360 * n   (2160 - ((which-2) * 60) - 35 - (Math.random() * 50))).step();
      this.setData({
        animationData: animation.export()
      })
    }
  
    timer = setTimeout(function () {
      _this.setData({
        hiddenModal: false
      })
    }
      , 1.4 * (2160 - (which - 1) * 60 300));
  
  },
  listenerConfirm: function (e) {
      var _this = this;
      this.setData({
        hiddenModal:true,
        isclick: "start"
      })
      reset.call(_this);
      function reset() {
        console.log("重置动画.....")
        var animation = wx.createAnimation({
          transformOrigin: "50% 50%",
          duration: 0,
          timingFunction: "linear"
        });
        animation.rotate(0).step();
        this.setData({
          animationData: animation.export()
        })
      }
    }
})
 
 
// //index.js
// //获取应用实例
// const app = getApp()
// Page({
//   data: {
//     motto: 'Hello World',
//     userInfo: {},
//     hasUserInfo: false,
//     canIUse: wx.canIUse('button.open-type.getUserInfo')
//   },
//   //事件处理函数
//   bindViewTap: function() {
//     wx.navigateTo({
//       url: '../logs/logs'
//     })
//   },
//   onLoad: function () {
//     if (app.globalData.userInfo) {
//       this.setData({
//         userInfo: app.globalData.userInfo,
//         hasUserInfo: true
//       })
//     } else if (this.data.canIUse){
//       // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
//       // 所以此处加入 callback 以防止这种情况
//       app.userInfoReadyCallback = res => {
//         this.setData({
//           userInfo: res.userInfo,
//           hasUserInfo: true
//         })
//       }
//     } else {
//       // 在没有 open-type=getUserInfo 版本的兼容处理
//       wx.getUserInfo({
//         success: res => {
//           app.globalData.userInfo = res.userInfo
//           this.setData({
//             userInfo: res.userInfo,
//             hasUserInfo: true
//           })
//         }
//       })
//     }
//   },
//   getUserInfo: function(e) {
//     console.log(e)
//     app.globalData.userInfo = e.detail.userInfo
//     this.setData({
//       userInfo: e.detail.userInfo,
//       hasUserInfo: true
//     })
//   }
// })

标签： 大转盘转盘小程序大程序

实例下载地址

微信小程序大转盘示例源码

点此下载实例

不能下载？内容有错？点击这里报错 + 投诉 + 提问

好例子网口号：伸出你的我的手 — 分享！

网友评论

我要评论

小贴士

感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。

类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见版权及免责申明

微信小程序大转盘示例源码

同类人气实例

实例介绍

实例下载地址

微信小程序大转盘示例源码

相关软件

相关文章

网友评论

小贴士

关于好例子网

下载周排行

下载总排行

微信小程序大转盘 示例源码

同类人气实例

实例介绍

实例下载地址

微信小程序大转盘 示例源码

相关软件

相关文章

网友评论

小贴士

关于好例子网

下载周排行

下载总排行

微信小程序大转盘示例源码

微信小程序大转盘示例源码