转盘组件的使用场景
营销活动中转盘抽奖等让用户随机选择时有一个良好的客户体验 。
请微信里搜索小程序 “亚哥唱吧”,体验转盘在小程序里的使用。
样例代码下载
项目源码地址: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格式的数据源。下一个博客再讲解。多谢关注。