<template><view class='box'><view :animation="animationData" class='turntable' ><view  v-for='(item,index) in reword' :key='index'><view class='sector' :style="'transform: rotate('+(index*(360/reword.length)-0.5*(360/reword.length))+'deg)'"><view class='inner' :style="'transform: rotate('+(360/reword.length)+'deg);background-color:'+item.color"></view></view><view :style="'transform: rotate('+index*(360/reword.length)+'deg) ;'" class="cell">{{item.content}}</view></view></view><view class='line'></view><button @click='onStart'>点击旋转</button></view></template><script>export default {data () {return {deg: 0, // 初始化角度duration:1000,awardNumber: 3, // 中奖区域 从1开始isStart: false,animationData: {},reword:[{content:'111',color:'#456484'},{content:'222',color:'#456544'},{content:'333',color:'#784654'},{content:"444",color:'#527484'},],}},onShow: function(){var animation = uni.createAnimation({duration: this.duration,timingFunction: 'ease-in-out',})this.animation = animation},methods:{//旋转某个角度rotate: function (deg,duration) {if (this.isStart) returnthis.isStart=trueconsole.log('启动了')setTimeout(function() {this.isStart=false}.bind(this), duration)this.animation.rotate(deg).step().rotate((this.awardNumber-1)*-(360/this.reword.length)).step({duration: 0,timingFunction: 'linear',})this.animationData = this.animation.export()},//this.awardNumber的值是多少 就会转到多少onStart(){this.rotate(360+(360-(this.awardNumber-1)*(360/this.reword.length)),this.duration)}}}
</script><style lang='scss'>
.box{position: relative;width: 100%;height: 800px;//background-color: blue;overflow:hidden;
}
.turntable {position: relative;margin: 200px auto;background:red;height:225px;width:225px;border-radius: 50%;text-align: center;overflow: hidden;
}
.line{position: fixed;top: 35%;left: 50%;background-color: #000;height: 80px;width: 1px;
}
.cell{position: absolute;width: 50px;height: 50px;top: 0;left: 50%;margin-left: -25px;background-color: yellow;transform-origin:25px 112.5px;
}
.sector {width: 225px; height: 225px;position: absolute;clip: rect(0 225px 225px 112.5px);overflow: hidden;
}
.inner {width: 100%; height: 100%;position: absolute;clip: rect(0 112.5px 225px 0);transform: rotate(60deg);border-radius: 50%;
}</style>

以上为代码部分
指定中奖区域为3,旋转后转到3区域

样式并未完善,旨在把最核心的功能点展示出来,方便借鉴和参考,具体文档移步uniapp和微信小程序文档