微信小程序之九宫格抽奖

1.实现效果

九宫格

2. 实现步骤

话不多说,直接上代码

/**index.wxml*/
<view class="table-list flex fcc fwrap"><block wx:for="{{tableList}}" wx:key="id"><view class="table-item btn fcc {{isTurnOver?'':'grayscale'}}" wx:if="{{item.type=='btn'}}" bind:tap="onPrizeClick">{{item.name}}</view><view class="table-item fcc {{item.isSelected?'selected':''}}" wx:else>{{item.name}}</view></block>
</view>
import { showTextToast } from '../../utils/util';// pages/turnTable/index.js
Page({/*** 页面的初始数据*/data: {tableList: [{ id: '1', type: 'prize', name: '奖品1', isSelected: false },{ id: '2', type: 'prize', name: '奖品2', isSelected: false },{ id: '3', type: 'prize', name: '奖品3', isSelected: false },{ id: '4', type: 'prize', name: '奖品8', isSelected: false },{ id: '5', type: 'btn', name: '抽奖', isSelected: false },{ id: '6', type: 'prize', name: '奖品4', isSelected: false },{ id: '7', type: 'prize', name: '奖品7', isSelected: false },{ id: '8', type: 'prize', name: '奖品6', isSelected: false },{ id: '9', type: 'prize', name: '奖品5', isSelected: false },],isTurnOver: true, //抽奖状态,是否旋转完(九宫格)},/*** 生命周期函数--监听页面加载*/onLoad(options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/****************************************** 九宫格抽奖 *******************************/onPrizeClick() {//如果不在抽奖状态中,则执行抽奖旋转动画if (this.data.isTurnOver) {this.setData({isTurnOver: false,});// 随机奖品效果const rand = (m, n) => {return Math.ceil(Math.random() * (n - m + 1) + m - 1);};let prizeId = rand(1, 8);this.lottery(prizeId);} else {showTextToast('请勿重复点击');}},// 抽奖旋转动画方法lottery(prize_id) {console.log('中奖ID:' + prize_id);/** 数组的长度就是最多所转的圈数,最后一圈会转到中奖后的位置* 数组里面的数字表示从一个奖品跳到另一个奖品所需要的时间* 数字越小速度越快* 想要修改圈数和速度的,更改数组个数和大小即可*/// let num_interval_arr = [90, 80, 70, 60, 50, 50, 50, 100, 150, 250];let num_interval_arr = [90, 80, 70, 60, 50, 50, 250];// 旋转的总次数let sum_rotate = num_interval_arr.length;// 每一圈所需要的时间let interval = 0;num_interval_arr.forEach((delay, index) => {setTimeout(() => {this.rotateCircle(delay, index + 1, sum_rotate, prize_id);}, interval);//因为每一圈转完所用的时间是不一样的,所以要做一个叠加操作interval += delay * 8;});},/**** @param {*} delay 表示一个奖品跳到另一个奖品所需要的时间* @param {*} index 表示执行到第几圈* @param {*} sum_rotate 表示旋转的总圈数* @param {*} prize_id 中奖的id号*/rotateCircle(delay, index, sum_rotate, prize_id) {// console.log(index)let _this = this;/** 页面中奖项的实际数组下标* 0  1  2* 3     5* 6  7  8* 所以得出转圈的执行顺序数组为 ↓*/let order_arr = [0, 1, 2, 5, 8, 7, 6, 3];// 页面奖品总数组let tableList = this.data.tableList;// 如果转到最后一圈,把数组截取到奖品项的位置if (index == sum_rotate) {order_arr.splice(prize_id);}console.log(order_arr);for (let i = 0; i < order_arr.length; i++) {setTimeout(() => {// 清理掉选中的状态tableList.forEach((e) => {e.isSelected = false;});// 执行到第几个就改变它的选中状态tableList[order_arr[i]].isSelected = true;// 更新状态_this.setData({tableList: tableList,});// 如果转到最后一圈且转完了,把抽奖状态改为已经转完了if (index == sum_rotate && i == order_arr.length - 1) {_this.setData({isTurnOver: true,});}}, delay * i);}},
});
.table-list {width: 100%;box-sizing: border-box;.table-item {width: 200rpx;height: 200rpx;margin-bottom: 10rpx;background-color: orange;color: #fff;border:5rpx solid snow;}.table-item.btn {background-color: gold;}.table-item.selected {background-color: orangered;}.table-item.turn {background-color: goldenrod;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/13269.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot+vue+Mysql的交流互动系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

java入门详细教程之集合的理解与应用

一、Collenction集合 数组和集合的区别 长度 数组的长度是不可变的,集合的长度是可变的 数据类型 数组可以存基本数据类型和引用数据类型 集合只能存引用数据类型,如果要存基本数据类型,需要存对应的包装类 Collection 集合概述和使用 Collection集合概述​&#xff1a; 是单…

构建安全的GenAI/LLMs核心技术解密之大模型对抗攻击(二)

构建安全的GenAI/LLMs核心技术解密之大模型对抗攻击(二) LlaMA 3 系列博客 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (一) 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (二) 基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (三) 基于 LlaMA …

Django接口卡死一直没有返回响应

当Django接口出现卡死且没有返回响应时&#xff0c;可能是由于多种原因导致的。以下是一些排查和解决问题的步骤&#xff1a; 查看日志&#xff1a; 首先检查Django的日志&#xff0c;看看是否有任何错误或异常被记录。这可以帮助你确定问题的根源。 检查数据库连接&#xff1…

【漏洞复现】泛微OA E-Cology GetLabelByModule SQL注入漏洞

漏洞描述&#xff1a; 泛微OA E-Cology是一款面向中大型组织的数字化办公产品&#xff0c;它基于全新的设计理念和管理思想&#xff0c;旨在为中大型组织创建一个全新的高效协同办公环境。泛微OA E-Cology getLabelByModule存在SQL注入漏洞&#xff0c;允许攻击者非法访问和操…

使用库进行Linux下串口收发通信(最简单没有之一)的记录

c-periphery 是一个小型 C 库,用于用户空间 Linux 中的 GPIO、LED、PWM、SPI、I2C、MMIO 和串行外设 I/O 接口访问。 c-periphery 简化并整合了原生 Linux API 到这些接口。 c-periphery 在嵌入式 Linux 环境(包括 Raspberry Pi、BeagleBone 等平台)中与外部外设连接非常有…

orangepi-5b 使用 rknn-toolkit2 实测

orangepi-5b 使用 rknn-toolkit2 实测 主机环境&#xff1a;ubuntu20.04 x86_64 开发板 orangepi-5b 4G ram 32G emmc 网站介绍 http://www.orangepi.cn/html/hardWare/computerAndMicrocontrollers/details/Orange-Pi-5B.html 基于rk3588s 所以我们使用 rknn-toolkit2 st…

【SAP HANA 32】HANA中distinct和having去重比较

目录 1、DISTINCT 2、HAVING 3、性能对比 3.1、查询复杂度 3.2、查询优化 3.3、内存使用</

colab使用本地数据集微调llama3-8b模型

在Google的Colab上面采用unsloth,trl等库&#xff0c;训练数据集来自Google的云端硬盘&#xff0c;微调llama3-8b模型&#xff0c;进行推理验证模型的微调效果。 保存模型到Google的云端硬盘可以下载到本地供其它使用。 准备工作&#xff1a;将训练数据集上传到google的云端硬盘…

字典(dict)

1.概念 列表和元组的使用缺点&#xff1a;当存储的数据要动态添加、删除的时候&#xff0c;我们一般使用列表&#xff0c;但是列表有时会遇到一些麻烦 解决方案&#xff1a;既能存储多个数据&#xff0c;还能在访问元素的很方便的定位到需要的元素&#xff0c;采用字典 语法…

[数据集][目标检测]结直肠息肉内镜图像病变检测数据集13524张2类别

数据集共分为2个版本&#xff0c;即A版和B版&#xff0c;两个版本图片数一样&#xff0c;数据集图片不存在重叠文件名也不存在重复&#xff0c;可以合并训练&#xff0c;也可以单独训练。 下面是信息介绍&#xff1a; 结直肠息肉内镜图像病变检测数据集13524张2类别A版 数据…

Elasticsearch的并发控制策略

文章目录 利用external对版本号进行外部控制利用if_seq_no和if_primary_term作为唯一标识来避免版本冲突 ES中的文档是不可变更的。如果你更新一个文档,会将就文档标记为删除,同时增加一个全新的文档。同时文是的version字段加1内部版本控制 If_seq_no If_primary_term 使用外…

【Entity Framework】聊聊EF中复杂查询运算符

【Entity Framework】聊聊EF中复杂查询运算符 文章目录 【Entity Framework】聊聊EF中复杂查询运算符一、概述二、联接三、GroupJoin四、SelectMany4.1/集合选择器不引用外部4.2/集合选择器引用 where 子句中的外部 五、GroupBy六、Left Join七、总结 一、概述 语言集成查询 (…

使用Xterm实现终端构建

————html篇———— // 需要使用Xterm Xterm的官网&#xff1a; Xterm.js 新建项目 增加基本文件 下载 框架 npm init -y Xterm依赖 npm install xterm/xterm 参考文档写的代码 贴入代码 <html><head><link rel"stylesheet" href"nod…

免费思维13招之十三:种群型思维

免费思维13招之十三&#xff1a;种群型思维 免费思维的最后一个思维——族群思维 人&#xff0c;都是群居性的动物&#xff0c;在人群中的一部分人群对于另一部分人群来说&#xff0c;具有强大的吸引力。那么&#xff0c;我们就从这一点出发&#xff0c;通过对其中一部分人群进…

知识付费系统开发成本高吗,大学生有哪些可以网络授课的平台?你知道吗?

在线教育绝对是以后教育行业发展的方向&#xff0c;越来越多发线下机构慢慢的向这方面去开始转型&#xff0c;做网上教育。那么大学生有哪些可以网络授课的平台?你知道吗? 软件类的网上授课平台 如钉钉&#xff0c;飞书等&#xff0c;这些软件都是由网上授课功能的&#xff0…

2万字实操入门案例之在Springboot框架下用Mybatis简化JDBC开发实现基础的操作MySQL之预编译SQL主键返回增删改查

环境准备 准备数据库表 use mybatis;-- 部门管理 create table dept(id int unsigned primary key auto_increment comment 主键ID,name varchar(10) not null unique comment 部门名称,create_time datetime not null comment 创建时间,update_time datetime not null comme…

Idea + maven 搭建 SSH (struts2 +hibernate5 + spring5) 环境

org.apache.struts struts2-core 2.3.35 org.apache.struts struts2-spring-plugin 2.3.35 org.apache.struts struts2-json-plugin 2.3.8 1.4 配置Java EE 坐标依赖 这里可以引入 servlet api&#xff0c;jstl 标签库等一系列工具 javax.servlet javax.servlet-api …

6大部分,20 个机器学习算法全面汇总!!建议收藏!(上篇)

前两天有小伙伴说想要把常见算法的原理 公式汇集起来。 这样非常非常方便查看&#xff01;分为上下两篇&#xff0c;下篇地址&#xff1a; 本次文章分别从下面6个方面&#xff0c;涉及到20个算法知识点&#xff1a; 监督学习算法 无监督学习算法 半监督学习算法 强化学习…

YOLOV8环境部署(GPU版本)

一、安装&#xff43;&#xff55;&#xff44;&#xff41;和&#xff43;&#xff55;&#xff44;&#xff4e;&#xff4e; 1、安装cuda之前先打开英伟达控制面板查看自己的显卡信息 2、“帮助”—>“系统信息”—>“组件”&#xff0c;然后看第三行的信息“Nvidia …