先来看下效果图：
这个圆盘被分为了5份，然后按照每个扇形划分：
<view animation="{{animationData}}" class="canvas-content" style='left:300rpx; top:300rpx'> <view class="canvas-list" wx:for="{{awardsList}}" wx:key="unique"> <view class="canvas-item"> <view class="canvas-item-text" style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})"> <block wx:if='{{show_len}}'> <image class='jiangping_img' mode='widthFix' src='{{awards_houduan[index].productUrl}}'></image> <text>{{awards_houduan[index].productName}}</text> </block> </view> </view> </view></view>核心的代码在这里：
每个扇形通过旋转不同的圈（turn）然后来改变各个扇形的位置：style="-webkit-transform: rotate({{item.turn}});transform: rotate({{item.turn}})"
var len = awards_list.length,html = [],turnNum = 1 / lenfor (var i = 0; i < len; i++) { // 奖项列表 html.push({ turn: i * turnNum + 'turn', award: awards_list[i].productName }); that.setData({ awardsList: html })}---------------------------------------以上仅是扇形抽奖盘的展示。核心还是transform : rotate( xturn )
小程序
