今天在分享个微信小程序实战 Canvas绘制可配置的转盘抽奖功能案例。今天我们就分享这样的小教程。希望对大家有所帮助。
不多说了,二当家要上图来啦!
快去拿个小板凳,坐等更多更新
注:如未能获取成功,或者遇到其他问题,本人微信:geekxz 。
如果需要更多动画,欢迎关注 【极客小寨】微信公众号,回复抽奖下载链接!所有文档会持续更新,欢迎关注一起成长!
2
<view class="wrapper">
<view class="header">
<text class="header-title"> 大转盘抽奖 </text>
<text class="header-subtitle"> 感恩节活动大抽奖,反馈广大客户 </text>
</view>
<view class="main">
<view class="canvas-container">
<view animation="{{animationData}}" class="canvas-content" >
<canvas style="width: 300px; height: 300px;" class="canvas-element" canvas-id="lotteryCanvas"></canvas>
<view class="canvas-line">
<view class="canvas-litem" wx:for="{{awardsList}}" wx:key="unique" style="-webkit-transform: rotate({{item.lineTurn}});transform: rotate({{item.lineTurn}})"></view>
</view>
<view class="canvas-list">
<view class="canvas-item" wx:for="{{awardsList}}" wx:key="unique">
<view class="canvas-item-text" style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})">{{item.award}}</view>
</view>
</view>
</view>
<view bindtap="getLottery" class="canvas-btn {{btnDisabled}}">抽奖</view>
</view>
<view class="main-container">
<view class="main-container-btn">
<button bindtap="gotoList" type="primary">查看中奖</button>
</view>
<view class="main-container-rule">
<text class="main-rule-title">活动规则:</text>
<text class="main-rule-item">1. xxxxxxxxxxx</text>
<text class="main-rule-item">2. xxxxxxxxxxx</text>
<text class="main-rule-item">3. xxxxxxxxxxx</text>
<text class="main-rule-item">4. xxxxxxxxxxx</text>
<text class="main-rule-item">5. xxxxxxxxxxx</text>
</view>
</view>
</view>
</view>