直播商城小程序开发，类似于转盘抽奖功能的实现

在直播商城小程序开发时，会设置多种趣味性的玩法，其中直播间中的转盘抽奖就是备受欢迎的玩法之一，那类似于转盘抽奖功能该如何实现呢？

直播商城小程序开发的转盘抽奖是将圆盘划分为六等份

我们可以将其想象成一个九宫格（是一个正方形），将所有的内容先定位到最中间的位置，再以中间的位置为起点，将元素分别按照他们的位置向上、下、左右移动移动的距离，去放置他们。注意他们的位置是有规律的，位置确定好就不要轻易改变他，若是文字位置不合理，可以根据padding值去调试。（还有一种做法，将其三块拼接成长方形，一共三个长方形，然后根据他们的位置开始旋转）

WXML

<!-- 活动抽奖弹出框 -->
<view class="activityzhezhao">
    <view class="activityzhezhao1">
      <!-- 转盘中间的按钮 -->
      <view class="cen" bindtap="onClick"></view>

      <view class="activity_box {{anmClass}} {{animationFlag ? 'animation': ''}}">
        <view class="item" wx:for="{{awards}}" wx:key="*this">
          <text style="color:{{item.color}}">{{item.firstname}}</text>
          <text style="color:{{item.color}}">{{item.lastname}}</text>
        </view>
      </view>
    </view>
    <!-- 转盘底柱 -->
      <view class="activityCircle">
        <cover-image src="xxx"></cover-image>
      </view>
      <!-- 关闭按钮 -->
      <view class="activityzhezhao12" bindtap="dialonClose"></view>
</view>

WXSS

page {
 height: 100%;
  100%;
}

view {
 box-sizing: border-box;
}

.activityzhezhao{
  100%;
 height: 100%;
 position: absolute;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 2;
 top: 0;
 left: 0;
 overflow-x: hidden;
 overflow-y: hidden;
 display: flex;
 align-items: center;
}
.activityzhezhao1{
  100%;
 height: 60%;
 position: relative;
}
.activityCircle{
  69vw;
 height: 28vw;
 margin-top: 45vw;
 margin-left: -84vw;
}
.activityzhezhao12{
  9vw;
 height: 9vw;
 margin-top: -95vw;
 margin-left: -10vw;
 background: url('xxx') no-repeat;
 background-size: 100% 100%;
}
.activityzhezhao11{
  69vw;
   height: 87vw;
 background: url('xxx') no-repeat;
 background-size: 100% 100%;
 margin: 0 auto;
}
.cen {
 position: absolute;
 left: 38vw;
 top: 15vw;
  22vw;
 height: 30vw;
 background: url('xxx') no-repeat;
 background-size: 100% 100%;
 z-index: 99;
}


.activity_box {
 height: 66vw;
  66vw;
 position: absolute;
 top: 0;
 left: 16vw;
 background: url('xxx') no-repeat;
 background-size: 100% 100%;
 > view {
    22vw;
   height: 22vw;
   position: absolute;
   top: 22vw;
   left: 22vw;

   text {
     display: block;
   }

   

   &:nth-of-type(1) {
     top: 0;
     left: 22vw;
     padding-top: 6vw;
   }
   &:nth-of-type(2) {
     top: 11vw;
     left: 44vw;
     padding-top: 8vw;
     transform: rotate(60deg);
   }
   &:nth-of-type(3) {
     top: 33vw;
     left: 42vw;
     padding-top: 8vw;
     transform: rotate(120deg);
   }
   &:nth-of-type(4) {
     top: 44vw;
     left: 22vw;
     margin-top: -7vw;
     transform: rotate(180deg);
   }
   &:nth-of-type(5) {
     top: 35vw;
     left: 0;
     padding-top: 10vw;
     transform: rotate(-120deg);
   }
   &:nth-of-type(6) {
     top: 11vw;
     left: 0vw;
     padding-top: 12vw;
     transform: rotate(-60deg);
   }
 }


 .item {
   font-family: PingFangSC-Semibold;
   font-size: 12px;
   color: #000;
   text-align: center;

 }


}
.animation{
 animation-fill-mode : forwards !important;
 animation: animation 6s linear;
}
.anm60 {
 animation-fill-mode : forwards !important;
 animation: animation1 .33s linear;
}
.anm120{
 animation-fill-mode : forwards !important;
 animation: animation2 .66s linear;
}
.anm180{
 animation-fill-mode : forwards !important;
 animation: animation3 .99s linear;
}
.anm240{
 animation-fill-mode : forwards !important;
 animation: animation4 1.33s linear;
}
.anm300{
 animation-fill-mode : forwards !important;
 animation: animation5 1.66s linear;
}
.anm0{
 animation-fill-mode : forwards !important;
 animation: animation6 1.99s linear;
}
@keyframes animation{
 from{
   transform: rotate(0deg);
 }
 to{
   transform: rotate(1080deg);
 }
}
@keyframes animation1{
 from{
   transform: rotate(0deg);
 }
 to{
   transform: rotate(60deg);
 }
}
@keyframes animation2{
 from{
   transform: rotate(0deg);
 }
 to{
   transform: rotate(120deg);
 }
}
@keyframes animation3{
 from{
   transform: rotate(0deg);
 }
 to{
   transform: rotate(180deg);
 }
}
@keyframes animation4{
 from{
   transform: rotate(0deg);
 }
 to{
   transform: rotate(240deg);
 }
}
@keyframes animation5{
 from{
   transform: rotate(0deg);
 }
 to{
   transform: rotate(300deg);
 }
}
@keyframes animation6{
 from{
   transform: rotate(0deg);
 }
 to{
   transform: rotate(360deg);
 }
}

JS

// components/dial/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
    anmAry: ['anm0', 'anm60','anm120','anm180','anm240','anm300'],
    anmClass: '',
    animationFlag: false,
    // 设置的奖项名称
      awards:[
        {
          id:0,
          firstname:'100%',
          lastname:'xxx',
          color:'#ff6906'
        },
        {
          id:1,
          firstname:'50%',
          lastname:'xxx',
          color:'#ffffff'
        },
        {
          id:2,
          lastname:'xxx',
          color:'#ff6906'
        },
        {
          id:3,
          firstname:'100%',
          lastname:'xxx',
          color:'#ffffff'
        },
        {
          id:4,
          firstname:'50%',
          lastname:'xxx',
          color:'#ff6906'
        },
        {
          id:5,
          lastname:'xxx',
          color:'#ffffff'
        },
      ],
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 点击关闭按钮，关闭弹窗
    dialonClose(){
      this.triggerEvent("dialonClose");
    },
    onClick(){
      this.setData({
        animationFlag: true
      })
      setTimeout(() => {
    // 这个index需要根据后台接口返回的去限定，可以使用索引，也可以使用key value，这个需要和后台去商量
        let index = parseInt(Math.random()*5)
        console.log(index);
        this.setData({
          animationFlag: false,
          anmClass: this.data.anmAry[index]
        })
      }, 6000);
    }
  }
})

以上就是“直播商城小程序开发，类似于转盘抽奖功能的实现”的全部内容了，希望对大家有帮助。
本文转载自网络，转载仅为分享干货知识，如有侵权欢迎联系云豹科技进行删除处理
原文链接：https://www.jianshu.com/p/7d9046a6bad7