开发思路有三部分,第一部分是用css绘制转盘背景,第二部分是利用<代码> wxs 语法实现响应式样式,第三部分是小程序内置动画api实现转盘的转动以及通过js转动随机性的实现。
如何画一个三角形 一开始,要写一个基础的<代码> wxml> & lt; view 类=皌urntable"比;
& lt;才能view 类=皐rapper"比;
,,,& lt; view 类=癷tem",在
& lt;才能view 类=癷tem-inner"比;
& lt; text> 10分& lt;/text>
& lt;才能/view>
& lt;/view>
& lt;才能/view>
& lt;/view>复制代码 我画了两个大小相同的长方形,长和宽分别rpx是300和600 rpx,利用<代码> 位置css属性,让两个长方形合并在一起。
.turntable {
,,显示:块;
,,宽度:100%;
,,身高:600 rpx;
}
.turntable .wrapper {
位置:,才能相对;
,,transform-origin:中心;
,,宽度:100%;
,,身高:600 rpx;
} 
合并之后我需要将两个长方体分离出来,把红色长方体变成半圆形、蓝色长方体顺时摆动60度,红色长方体逆时摆动30度,为什么要这样转,因为蓝色本来随红色逆时摆动30度,而一个三角形内角为60度,为了形成这60度的夹角,我需要红色摆完之后再将蓝色顺时移动60度,也就这样形成60度夹角。
.turntable .wrapper .item {
位置:才能,绝对;
,,左:50%;
,,宽度:300 rpx;
,,身高:600 rpx;
,,这个特性:0 px 300 rpx 300 rpx 0;
,,transform-origin: left 中心;
变换才能:旋转(-30度);
}
.turntable .wrapper .item .item-inner {
,,text-align:中心;
,,宽度:300 rpx;
,,身高:600 rpx;
变换才能:translateX (-300 rpx),旋转(60度),,
,,transform-origin: right 中心;
,,这个特性:300 rpx 0, 0, 300 rpx;
,,字体大小:32 rpx;
} 
接下来关键一步在<代码> 项处增加,<代码>溢出:隐藏> .turntable .wrapper .item {
位置:才能,绝对;
,,左:50%;
,,宽度:300 rpx;
,,身高:600 rpx;
,,这个特性:0 px 300 rpx 300 rpx 0;
,,溢出:隐藏。
,,transform-origin: left 中心;
}
.turntable .wrapper .item .item-inner text {
,,显示:块;
,,transform-origin:中心;
变换才能:translateY (100 rpx), translateX (43 rpx),旋转(-30度);
} 
一个三角形画出来后,将6个同等大小的三角形并让他们可以拼接在一起组合成一个圆盘,只需各自修改三角的旋转角度即可。
.turntable .wrapper .item: nth-child (1), {
变换才能:旋转(-30度);
}
.turntable .wrapper .item: nth-child (2), {
变换才能:旋转(-90度);
}
.turntable .wrapper .item: nth-child (3), {
变换才能:旋转(-150度);
}
.turntable .wrapper .item: nth-child (4), {
变换才能:旋转(-210度);
}
.turntable .wrapper .item: nth-child (5), {
变换才能:旋转(-270度);
}
.turntable .wrapper .item: nth-child (6), {
变换才能:旋转(-330度);
}
