微信小程序实现转盘抽奖

网友投稿 568 2023-11-11

本文实例为大家分享了微信小程序实现转盘抽奖的具体代码，供大家参考，具体内容如下

微信小程序实现转盘抽奖

效果图如下所示

.wxml

?
1
2
3
4
5
6
7
8
9
10
11
12
<view class="index">
<view class="xian"></view>
<view class="xian"></view>
<view class="xian"></view>
<view class="detail">一等奖</view>
<view class="detail">二等奖</view>
<view class="detail">三等奖</view>
<view class="detail">四等奖</view>
<view class="detail">五等奖</view>
<view class="detail">六等奖</view>
<span bindtap="zhuanin" style="transform:rotate({{trasn}}deg);"></span>
</view>

.wxss

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
.index{
width: 300px;
margin: 50rpx calc((100% - 300px) / 2);
border:1px solid #ffcccc;
border-radius: 50%;
height: 300px;
position: relative;
overflow: hidden;
font-size: 26rpx;
}
.xian{
width:300px;
height:1px;
background:#d6d6d6;
position:absolute;
top:150px;
left:0;
}
.index>.xian:nth-child(2){
transform:rotateZ(60deg)
}
.index>.xian:nth-child(3){
transform:rotateZ(120deg)
}
.detail{
position: absolute;
}
.index>.detail:nth-child(4){
top:25px;left:132px;
}
.index>.detail:nth-child(5){
top:90px;left:225px;
}
.index>.detail:nth-child(6){
top:190px;left:225px;
}
.index>.detail:nth-child(7){
top:250px;left:132px;
}
.index>.detail:nth-child(8){
top:190px;left:40px;
}
.index>.detail:nth-child(9){
top:90px;left:40px;
}
.index>span{
width: 30px;
height: 30px;
background-color: #ffcccc;
border-radius: 50%;
position: absolute;
left: 135px;
top:135px;
}
.index>span::after{
content: ;
width:0;
height:0;
border-right:6px solid transparent;
border-left:6px solid transparent;
border-bottom:26px solid #ffcccc;
z-index: 10;
position: absolute;
left: 8.5px;
top: -24px;
}

.js

为大家推荐现在关注度比较高的微信小程序教程一篇：《微信小程序开发教程》小编为大家精心整理的，希望喜欢。

您可能感兴趣的文章:微信小程序开发之大转盘 仿天猫超市抽奖实例微信小程序实现简单九宫格抽奖微信小程序实现走马灯式抽奖微信小程序抽奖组件的使用步骤微信小程序实现翻牌抽奖动画微信小程序 扭蛋抽奖机css3动画实现详解微信小程序实现九宫格抽奖微信小程序实现多宫格抽奖活动微信小程序 摇一摇抽奖简单实例实现代码微信小程序转盘抽奖的实现方法

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 方法 实例
上一篇:微信小程序实现可长按移动控件
下一篇:微信小程序 wx.uploadFile无法上传解决办法
相关文章

 发表评论

暂时没有评论，来抢沙发吧~