uniapp实现简单的九宫格抽奖(附源码)

效果展示
uniapp实现大转盘抽奖
实现步骤:
1.该页面可设置8个奖品,每个奖品可设置中奖机会的权重,如下chance越大,中奖概率越高(大于0)
// 示例代码
prizeList: [{id: 1,image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",name: "奖品1",chance: 1},{id: 2,image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",name: "奖品2",chance: 3},{id: 3,image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",name: "奖品3",chance: 1},{id: 4,image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",name: "奖品4",chance: 1},{id: 5,image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",name: "奖品5",chance: 1},{id: 6,image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",name: "奖品6",chance: 1},{id: 7,image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",name: "奖品7",chance: 2},{id: 8,image: "https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp",name: "奖品8",chance: 1}
]
2.该页面8个奖品加上一个立即抽奖,一共9个格子,可使用flex-wrap布局排列,转到哪个格子就使用border高光标注
<!-- 示例代码 -->
<view class="lottery"><block v-for="(item, index) in prizeList" :key="index"><image class="prize" :class="currentIndex==index?'active':''" src="https://img.alicdn.com/imgextra/i4/1939750137/O1CN01XZivln1CsmzUGGtQF_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" /><view v-if="index==3" class="goLottery center_row" :style="btnDisabled?'opacity:0.5;':''" @tap="goLottery"><view>立即抽奖</view></view></block>
</view>
3.转动可多次使用不同时间的定时器setInterval和clearInterval结合,不断切换格子active的border位置
// 示例代码
data() {return {currentIndex: 0,runIndexList: [0,1,2,4,7,6,5,3],lastRunStepList: [0,1,2,7,3,6,5,4],btnDisabled: false,prizeList: []}
},let timer = setInterval(() => {count--currentIndex++this.currentIndex = (this.runIndexList[currentIndex % 8])if (count < this.prizeList.length * 2) {clearInterval(timer)let timer2 = setInterval(() => {count--currentIndex++this.currentIndex = (this.runIndexList[currentIndex % 8])if (count < this.prizeList.length * 1 - 3) {clearInterval(timer2)let timer3 = setInterval(() => {count--currentIndex++this.currentIndex = (this.runIndexList[currentIndex % 8])if (count <= 0) {clearInterval(timer3)this.btnDisabled = falseuni.showToast({title: `恭喜您,抽中了${this.prizeList[this.currentIndex].name}`,icon: "none"})}}, 400)}}, 200)}
}, 100)
4.根据提前设定好的奖品概率change随机抽取奖品
// 示例代码
// 返回抽奖结果奖品的index
getResultIndex() {let totalChance = 0for (let i in this.prizeList) {totalChance += Number(this.prizeList[i].chance ? this.prizeList[i].chance : 1)}// 0 ~ 1let random = Math.random()let index = 0let num = 0for (let i in this.prizeList) {num += (Number(this.prizeList[i].chance) / totalChance)if (random < num) {index = Number(i)break}}return index
}
大功告成!

有任何问题请留言咨询,着急请+企鹅1140559610有源码
相关文章:
uniapp实现简单的九宫格抽奖(附源码)
效果展示 uniapp实现大转盘抽奖 实现步骤: 1.该页面可设置8个奖品,每个奖品可设置中奖机会的权重,如下chance越大,中奖概率越高(大于0) // 示例代码 prizeList: [{id: 1,image: "https://img.alicdn…...
C++设计模式_09_Abstract Factory 抽象工厂
与上篇介绍的Factory Method工厂方法模式一样,Abstract Factory 抽象工厂模式也属于典型的“对象创建模式”模式,解决的问题也极其相似,在理解了Factory Method工厂方法模式的基础上再去理解Abstract Factory 抽象工厂模式就会变得更加容易。…...
一些前端面试思考
回流和重绘 先牢记这句话,回流必将引起重绘,而重绘不一定会引起回流。回流的代价要远大于重绘。 当你给一个元素更换颜色,这样的行为是不会影响页面布局的,DOM树不会变化,但颜色变了,渲染树得重新渲染页面&…...
Spring MVC(上)
1、Spring MVC简介: MVC是一种软件架构的思想,将软件按照模型、视图、控制器来划分 M:Model,模型层,指工程中的JavaBean,作用是处理数据 JavaBean分为两类: 一类称为实体类Bean:专…...
ORACLE内存结构
内存体系结构 目录 内存体系结构 2.1自动内存管理 2.2自动SGA内存管理 2.3手动SGA内存管理 2.3.1数据库缓冲区 2.3.1.1保留池 2.3.1.2回收池 2.3.2共享池 2.3.2.1SQL查询结果和函数查询结果 2.3.2.2库缓存 2.3.2.3数据字典缓存 2.3.3大池 2.3.4 …...
excel常用的几个函数
1、MID函数 通常用来返回返回指定字符串中的子串。 函数公式: MID(string, starting_at, extract_length) String(必填):包含要提取字符的文本字符串 starting_at(必填):文本中要提取的第一个字…...
【Bug】【内存相关】偶然发现一个内存溢出Bug复盘
一、问题 跑自动化用例的时候,uat-sg环境,发现SGW经常会返回 502 Bad Gateway响应 二、原因 经过SRE和BE Dev共同排查,502 是从ALB-- > 后端服务 后端服务无法响应导致,ALB会直接给客户端返回502。 服务端:由于c…...
python读写.pptx文件
1、读取PPT import pptx pptpptx.Presentation(rC:\Users\user\Documents\\2.pptx) # ppt.save(rC:\Users\user\Documents\\1.pptx) # slideppt.slides.add_slide(ppt.slide_layouts[1])# 读取所有幻灯片上的文字 for slide in ppt.slides:for shape in slide.shapes:if shape…...
【Godot】【BUG】4.x NavigationAgent 导航不生效
4.2.beta2 试了半天才发现原来默认只对第一个有导航的 TileMap 的第 1 层 生效,而我设置的导航层不是第一层,然后我新建了一个 TileMap 将导航的瓦片设置到这个 TileMap 上了,如图 这样就解决了问题,不用再修改默认设置的东西了&a…...
Rust逆向学习 (1)
文章目录 Hello, Rust Reverse0x01. main函数定位0x02. main函数分析line 1line 2line 3line 4~9 0x03. IDA反汇编0x04. 总结 近年来,Rust语言的热度越来越高,很多人都对Rust优雅的代码和优秀的安全性赞不绝口。对于开发是如此,对于CTF也是如…...
【Golang | reflect】利用反射实现方法的调用
引言 go语言中,如果某个数据类型实现了一系列的方法,如何批量去执行呢,这时候就可以利用反射里的func (v Value) Call(in []Value) []Value 方法。 // Call calls the function v with the input arguments in. // For example, if len(in)…...
Teleport
从官网中获取到的代码如下 App.vue <template><div class"outer"><h3>Tooltips with Vue 3 Teleport</h3><div><MyModal /></div></div> </template> <script setup> import MyModal from "./My…...
flutter与原生 相互通信实战
一、原生和flutter 通信 ios 通信类 CommonUtil.swift import Foundation import Flutterpublic class CommonUtil {public static func emitEvent(channel: FlutterMethodChannel, method: String, type: String, errCode: Int32?, errMsg: String?, data: Any?){safeMa…...
结构光相机原理
结构光相机原理...
ubuntu安装Anaconda
下载 Anaconda 进入 Ubuntu,自己新建下载路径,输入以下命令开始下载 注意,如果不是 x86_64,需要去镜像看对应的版本(https://mirrors.bfsu.edu.cn/anaconda/archive/?CM&OA) wget https://mirrors.…...
【RNA structures】RNA转录的重构和前沿测序技术
文章目录 RNA转录重建1 先简单介绍一下测序相关技术2 Map to Genome Methods2.1 Step1 Mapping reads to the genome2.2 Step2 Deal with spliced reads2.3 Step 3 Resolve individual transcripts and their expression levels 3 Align-de-novo approaches3.1 Step 1: Generat…...
4、Kafka 消费者
5.1 Kafka 消费方式 5.2 Kafka 消费者工作流程 5.2.1 消费者总体工作流程 5.2.2 消费者组原理 Consumer Group(CG):消费者组,由多个consumer组成。形成一个消费者组的条件,是所有消费者的groupid相同。 • 消费者组内…...
CSS3 渐变
CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。 CSS3渐变有两种类型:线性渐变(Linear Gradients)和径向渐变(Radial Gradients)。 线性渐变(Linear Gradients): 线性…...
【Python 千题 —— 基础篇】分割有效信息
题目描述 题目描述 有时候我们需要截取字符串以获取有用的信息,比如对于字符串 “日期:2010-10-29”,我们需要截取后面的 10 个字符来获取日期,以便进行进一步分析。编写一个程序,输入一个字符串,然后输出…...
webrtc基于DTLS的端口复用技术
DTLS协议: DTLS(Datagram Transport Layer Security)数据包安全传输协议,用于在不可靠的数据包传输协议上(如UDP)提供数据的安全传输。 UDP多路复用: 一个UDP多路复用,被用来处理共享同一个UDP端口的多个并发的UDT连接。类似同一个tcp port上创建多个socket connec…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
Keil 中设置 STM32 Flash 和 RAM 地址详解
文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...
Neo4j 集群管理:原理、技术与最佳实践深度解析
Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...
云原生玩法三问:构建自定义开发环境
云原生玩法三问:构建自定义开发环境 引言 临时运维一个古董项目,无文档,无环境,无交接人,俗称三无。 运行设备的环境老,本地环境版本高,ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术:基于互相关的相干体技术(Correlation)第二代相干体技术:基于相似的相干体技术(Semblance)基于多道相似的相干体…...
