微信小程序里的抽奖转盘简单布局

先来看下效果图：这个圆盘被分为了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 ) 小程序