微信小程序：九宫格抽奖

废话不多说，先上样板图

代码就先wxml文件：

<view id="container"><!--左上--><view id="li" class='{{amplification_index===1?"indexli":""}}'>一等奖<view></view></view><!--上--><view id="li" class='{{amplification_index===2?"indexli":""}}'>二等奖<view></view></view><!--右上--><view id="li" class='{{amplification_index===3?"indexli":""}}'>三等奖<view></view></view><!--左--><view id="li" class='{{amplification_index===8?"indexli":""}}'>八等奖<view></view></view><!--开始--><a bindtap="startrolling">开始抽奖</a><!--右--><view id="li" class='{{amplification_index===4?"indexli":""}}'>四等奖<view></view></view><!--左下--><view id="li" class='{{amplification_index===7?"indexli":""}}'>七等奖<view></view></view><!--下--><view id="li" class='{{amplification_index===6?"indexli":""}}'>六等奖<view></view></view><!--右下--><view id="li" class='{{amplification_index===5?"indexli":""}}'>五等奖<view></view></view><p id="pp"></p>
</view>

wxss文件：

#container {width: 750rpx;height: 750rpx;
}#li, a {background: #fff;margin: 20rpx;border: 1px solid #000000;width: 210rpx;height: 210rpx;box-sizing: border-box;display: block;float: left;text-align: center;line-height: 100px;position: relative;border-radius: 5rpx;
}a:hover {cursor: pointer;color: orange;font-size: 18px;
}.active {background: red;color: #fff;
}#pp {line-height: 32px;color: #9a9a9a;text-align: center;
}page view .indexli {width: 210rpx;height: 210rpx;margin-top: 0rpx;margin-left: 0rpx;margin-bottom: 0rpx;margin-right: 0rpx;box-sizing: border-box;
}.indexli view {position: absolute;width: 190rpx;height: 190rpx;background: #000000;opacity: 0.3;left: 0;top: 0;border:10rpx solid blue;
}a {position: relative;
}a image {width: 100%;height: 100%;border-radius: 5rpx;
}a view {width: 80rpx;height: 80rpx;position: absolute;font-size: 40rpx;color: #fff;font-weight: 700;line-height: 40rpx;margin-left: -40rpx;margin-top: -40rpx;left: 50%;top: 50%;}.c_title {width: 100%;text-align: center;color: #fff;font-size: 20rpx;padding-top: 30rpx;
}.c_title2 {color: #fff;text-align: center;font-size: 40rpx;
}.c_title3 {background: red;width: 250rpx;margin-left: 250rpx;height: 40rpx;line-height: 40rpx;color: #fff;font-size: 20rpx;text-align: center;
}.c_titlr4 {background: gold;color: red;width: 400rpx;border-radius: 500rpx;text-align: center;font-size: 20rpx;margin-left: 175rpx;margin-top: 10rpx;
}.b1 {margin-left: 20rpx;

js文件

// pages/Lottery/Lottery.js
Page({data: {last_index: 0,//上一回滚动的位置amplification_index: 0,//轮盘的当前滚动位置roll_flag: true,//是否允许滚动max_number: 8,//轮盘的全部数量speed: 300,//速度，速度值越大，则越慢 初始化为300finalindex: 5,//最终的奖励距离当前的位置！不是最后的几等奖！myInterval: "",//定时器max_speed: 40,//滚盘的最大速度minturns: 8,//最小的圈数为2runs_now: 0//当前已跑步数},//开始滚动startrolling: function () {let _this = this;//初始化步数_this.data.runs_now = 0;//当前可以点击的状态下if (_this.data.roll_flag) {_this.data.roll_flag = false;//启动滚盘，注，若是最终后台无返回就不好意思里_this.rolling();}},onShow: function () {this.data.min_height = getApp().globalData.windowheight;this.setData(this.data);},//滚动轮盘的动画效果rolling: function (amplification_index) {var _this = this;this.data.myInterval = setTimeout(function () { _this.rolling(); }, this.data.speed);this.data.runs_now++;//已经跑步数加一this.data.amplification_index++;//当前的加一//获取总步数，接口延迟问题，所以最后还是设置成1s以上var count_num = this.data.minturns * this.data.max_number + this.data.finalindex - this.data.last_index;//上升期间if (this.data.runs_now <= (count_num / 3) * 2) {this.data.speed -= 30;//加速if (this.data.speed <= this.data.max_speed) {this.data.speed = this.data.max_speed;//最高速度为40；}}//抽奖结束else if (this.data.runs_now >= count_num) {clearInterval(this.data.myInterval);this.data.roll_flag = true;}//下降期间else if (count_num - this.data.runs_now <= 10) {this.data.speed += 20;}//缓冲区间else {this.data.speed += 10;if (this.data.speed >= 100) {this.data.speed = 100;//最低速度为100；}}if (this.data.amplification_index > this.data.max_number) {//判定！是否大于最大数this.data.amplification_index = 1;}this.setData(this.data);}
})

样式

color: #fff; font-size: 40rpx;}
.b2 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}
.b3 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}
.b4 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}
.b5 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}

微信小程序：九宫格抽奖相关推荐

【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）
上图话不多说直接上图,抽奖是顺时针又快变慢(还原抽奖的动画)进行抽奖,抽奖的几率都是随机源码接下来展示的就是微信小程序中的九宫格抽奖说明适用范围抽奖逻辑只是原生JS,通过数据进行驱动,因此 ...
微信小程序九宫格抽奖
因公司需求要做一个小程序的九宫格抽奖,但是一块又没有合适的插件,于是到网上看到一个,还挺不错的. 效果图 1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴; 2.抽奖的ite ...
微信小程序九宫格抽奖
效果图比较卡顿,真实运行效果是旋转的用到的素材: 实现步骤: 实现原理改变每一项的透明度实现选中效果.利用setTimeOut时间使旋转速度越来越慢.达到慢慢停止的效果.实际应用中可以将9张奖品图 ...
html 小程序九宫格抽奖,【小程序与公众号】微信小程序九宫格抽奖（抽奖完全随机）...
let timer; let onDrawing = false; // 是否可进行抽奖标识,默认为false可进行抽奖 let drawIndex = 0; //抽奖过程KEY Component( ...
IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...
微信小程序-转盘抽奖
微信小程序-转盘抽奖代码: lucky-draw.wxss: .lucky_draw_zp{ width: 502rpx; height: 502rpx; margin: 0 auto; positi ...
微信小程序的抽奖页面
微信小程序的抽奖页面做一个1-10的微信小程序抽奖界面,随机到6和8会显示中奖信息! 点开始按钮开始执行,点结束按钮结束抽奖并且判断是否中奖 wxml代码: <view>{{title} ...
微信小程序九宫格图的排版----注意层次排版（层次最重要）
微信小程序九宫格图的排版----注意层次排版(层次最重要) 1.wxml中的代码(图片和数据都是网页获取来的,详细下看) 2.排版 3.使用.js文件进行事件加载 | | | |
微信小程序圆盘抽奖（扇形画圆）
微信小程序圆盘抽奖(扇形画圆) 前言提示:这里可以添加本文要记录的大概内容: 例如:领导安排做一个微信小程序的转盘抽奖,要求可以复用,动态的修改抽奖的板块个数,由于是第一次做微信小程序踩了很多的坑, ...
html 小程序九宫格抽奖,微信小程序实现多宫格抽奖活动
最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢首先看效果: 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样, ...

微信小程序：九宫格抽奖

微信小程序：九宫格抽奖相关推荐

最新文章

热门文章