微信小程序:转盘组件的代码分析

转盘组件的使用场景

营销活动中转盘抽奖等让用户随机选择时有一个良好的客户体验 。
请微信里搜索小程序 “亚哥唱吧”,体验转盘在小程序里的使用。

请微信里搜索 小程序 “亚哥唱吧”

样例代码下载

项目源码地址:https://github.com/hujinchen/zhuanpan2.0
原始博客:https://blog.csdn.net/qq_23375733/article/details/81274955

代码走读

在\pages\index\index.wxml里的<zhuanpan…开始的代码就会自动加载components\zhuanpan下定义的转盘组件:
在这里插入图片描述

转盘原理的核心代码

转盘最核心代码:就是通过animationData数据来显示转动,如下代码所示:
转盘最核心的代码片段

集成时的注意要点

要点一:在要引用组件的页面的 json 文件(比如该例子中的\pages\index\index.json)中,写上:

     "usingComponents": {
      "zhuanpan": "/components/zhuanpan/zhuanpan"
   }
}

##要点二:转盘数据源是{{xiaojuedingArr}},可以源于某JS文件(此例源于:var xiaojuedingArr = require(’…/…/utils/xiaojueding.js’))

   <!-- myAwards就是当被子组件触发时的函数 size:转盘大小 -->
   <zhuanpan id='zhuanpan' 
   bind:myData='getData' 
   bind:myAwards="getAwards" 
   bind:startZhuan="startZhuan" 
   size='{{size}}' 
   musicflg='{{musicflg}}' 
   fastJuedin='{{fastJuedin}}' 
   repeat='{{repeat}}' 
   zhuanpanArr='{{xiaojuedingArr}}' 
   awardsConfig='{{awardsConfig}}'>
   </zhuanpan>

一般为了方便小程序审核发布后,修改转盘数据源,xiaojuedingArr 里的数据来源于云数据库里定义的JSon格式的数据源。下一个博客再讲解。多谢关注。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值