⼩程序:转盘组件的代码分析
⼩程序:转盘组件的代码分析
转盘组件的使⽤场景
营销活动中转盘抽奖等让⽤户随机选择时有⼀个良好的客户体验 。
请⾥搜索⼩程序 “亚哥唱吧”,体验转盘在⼩程序⾥的使⽤。
样例代码下载
代码⾛读
在\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格式的数据源。下⼀个博客再讲解。多谢关注。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。