微信小程序怎样制作_微信小程序完成九宫格抽奖

2021-01-08 10:23

微信小程序实现九宫格抽奖       这篇文章主要为大家详细介绍了微信小程序实现九宫格抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码,适用于年会抽奖,供大家参考,具体内容如下

效果图比较卡顿,真实运行效果是旋转的

用到的素材:

实现步骤:

实现原理

改变每一项的透明度实现选中效果。利用setTimeOut时间使旋转速度越来越慢。达到慢慢停止的效果。实际应用中可以将9张奖品图片和中奖项均通过接口返回。以方便奖品的调整。 

1.布局绘制

 view 
 停止位置: input value='{{luckPosition}}' bindinput='input' type='number' /input 
 view 
 view 
 image src='{{images[0]}}' /image 
 image src='{{images[1]}}' /image 
 image src='{{images[2]}}' /image 
 /view 
 view 
 image src='{{images[7]}}' /image 
 image src='{{btnconfirm}}' bindtap='{{clickLuck}}' /image 
 image src='{{images[3]}}' /image 
 /view 
 view 
 image src='{{images[6]}}' /image 
 image src='{{images[5]}}' /image 
 image src='{{images[4]}}' /image 
 /view 
 /view 
 /view 

2.数据准备

//计数器
var interval = null;
//值越大旋转时间越长 即旋转速度
var intime = 50;

//9张奖品图片 images: ['/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png', '/images/item1.png', '/images/item.png'], //确定按钮 btnconfirm: '/images/dianjichoujiang.png', //点击事件 clickLuck:'clickLuck', //中奖位置 luckPosition:0,

3.显示界面时慢慢转动

//进入页面时缓慢切换
 loadAnimation:function (){
 var e = this;
 //初始位置为0
 var index = 0;
 //每1秒钟切换一次位置
 interval = setInterval(function () {
 if (index 7) {
 index = 0;
 e.data.color[7] = 0.5
 } else if (index != 0) {
 e.data.color[index - 1] = 0.5
 e.data.color[index] = 1
 e.setData({
 color: e.data.color,
 index++;
 }, 1000);
}

4.停止旋转

//which为中奖位置 需要停止时调用该方法
stop: function (which){
 var e = this;
 //清空计数器
 clearInterval(interval);
 //初始化当前位置
 var current = -1;
 var color = e.data.color;
 for (var i = 0; i color.length; i++) {
 if (color[i] == 1) {
 current = i;
 //下标从1开始
 var index = current + 1;
 e.stopLuck(which, index, intime, 10);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




扫描二维码分享到微信

在线咨询
联系电话

020-66889888