海同科技，欢迎您！
就业
培训
资料
职坐标
IT知识库

移动开发

站
热门城市 全国站>
    其他省市
      搜索
      快速购买 快速购买  >
      icon 400-636-0069

      热门课程

      IT学院

      职坐标首页 IT知识库 移动开发 微信
      选择在海同培训： 30 天 1327 名， 今日申请 38 人 IT培训咨询 >>
      微信小程序开发之大转盘抽奖
      白羽 2018-07-18 来源 ：网络 阅读 3632 评论 0

      摘要：本文将带你了解微信小程序开发之大转盘抽奖，希望本文对大家学微信有所帮助。







      需求 一个转盘界面 闪动的小点 奖品背景颜色的顺序改变   以及最终的结果提示

      微信小程序开发之大转盘抽奖


      分析完界面后就开始动手写了
      界面就是外面一个最大的view包住 闪动的小点一个view 8个奖品和一个START按钮

      微信小程序开发之大转盘抽奖
      *闪动的红黄色小点
      微信小程序开发之大转盘抽奖

      我们计算好每个点的位置 用for循环设置坐标值
      微信小程序开发之大转盘抽奖

      定义红黄两色小球用setInterval更改颜色和实现闪动效果

      微信小程序开发之大转盘抽奖

      计算好奖品图片的位置 同理循坏定义

      微信小程序开发之大转盘抽奖
      绑定奖品背景颜色通过当前数组下标来实现选中的效果  用setInterval来进行旋转的效果，停下来的位置我们用一个随机数来控制


      微信小程序开发之大转盘抽奖
      注意
      旋转中途点击我们应将START变为WAIT并且在事件中增加判断其状态 使其点击无效




      结果图
      微信小程序开发之大转盘抽奖

      当然了 奖品图和内容你可以自己修改 你也更好地定义球与奖品图样式 你可以自己去完善
      也许你也可以将奖品转动 定义一个指针指向奖品等.    


      本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道！

      app程序开发 小程序实例 微信支付
      本文由 @白羽 发布于职坐标。未经许可，禁止转载。
      喜欢 | 1 不喜欢 | 1
      看完这篇文章有何感觉？已经有2人表态，50%的人喜欢 快给朋友分享吧~
      评论（0）
      后参与评论
      加入IT交流圈
      JAVA工程师交流群 +加入
      大数据架构师交流群 +加入
      人工智能Python交流群 +加入
      WEB/H5前端交流群 +加入
      职坐标公众号
      移动开发 直通车
      • 索取资料 索取资料 索取资料
      • 答疑解惑 答疑解惑 答疑解惑
      • 技术交流 技术交流 技术交流
      • 职业测评 职业测评 职业测评
      • 面试技巧 面试技巧 面试技巧
      • 高薪秘笈 高薪秘笈 高薪秘笈
      海同师资推荐 更多>>
      黄骈
      黄骈 联系TA
      认证System Analyst，System Architect
      程光淼
      程光淼 联系TA
      精通C、C++等语言、智能芯片开发
      热门就业培训班 更多>>
      【零基础】人工智能+Python全栈开发课程
      【零基础】人工智能+Python全栈开发课程
      人工智能+Python技术风口浪潮
      【零基础】JavaEE高级开发工程师课程
      【零基础】JavaEE高级开发工程师课程
      0基础入学Java课程
      【零基础】大数据与分布式架构师课程
      【零基础】大数据与分布式架构师课程
      培训大数据分布式架构
      微信30天热搜词 更多>>
      微信公众号开发平台 微信小程序开发案例 微信公众号功能开发 微信开发价格 微信公小程序开发 微信公众号开发小程序 微信公众号开发方案 微信公众号开发者 微信小程序实战教程 微信支付开发的场景 微信公众号开发教程 小程序实例 企业微信应用开发 微信支付 微信开发小程序 微信接口开发 微信应用号开发工具 微信应用开发架构 微信小程序怎么开发 微信小程序平台

      您输入的评论内容中包含违禁敏感词

      我知道了

      助您圆梦职场 匹配合适岗位
      验证码手机号，获得海同独家IT培训资料
      选择就业方向：
      人工智能物联网
      大数据开发/分析
      人工智能Python
      Java全栈开发
      WEB前端+H5

      请输入正确的手机号码

      请输入正确的验证码

      获取验证码

      您今天的短信下发次数太多了，明天再试试吧！

      提交

      我们会在第一时间安排职业规划师联系您！

      您也可以联系我们的职业规划师咨询：

      小职老师的微信号：z_zhizuobiao
      小职老师的微信号：z_zhizuobiao

      版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
      上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
       沪公网安备 31011502005948号    

      关于我们 │ 法律声明 │ 联系我们

      ©2015 www.zhizuobiao.com All Rights Reserved

      208小时内训课程
      在线客服