E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序里的抽奖转盘简单布局
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏