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

效果展示

uniapp实现大转盘抽奖

实现步骤:

1.该页面可设置8个奖品,每个奖品可设置中奖机会的权重,如下chance越大,中奖概率越高(大于0)

javascript 复制代码
// 示例代码
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高光标注

html 复制代码
<!-- 示例代码 -->
<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.转动可多次使用不同时间的定时器setIntervalclearInterval结合,不断切换格子active的border位置

javascript 复制代码
// 示例代码
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 = false
						uni.showToast({
							title: `恭喜您,抽中了${this.prizeList[this.currentIndex].name}`,
							icon: "none"
						})
					}
				}, 400)
			}
	}, 200)
	}
}, 100)

4.根据提前设定好的奖品概率change随机抽取奖品

javascript 复制代码
// 示例代码
// 返回抽奖结果奖品的index
getResultIndex() {
	let totalChance = 0
	for (let i in this.prizeList) {
		totalChance += Number(this.prizeList[i].chance ? this.prizeList[i].chance : 1)
	}
	// 0 ~ 1
	let random = Math.random()
	let index = 0
	let num = 0
	for (let i in this.prizeList) {
		num += (Number(this.prizeList[i].chance) / totalChance)
		if (random < num) {
			index = Number(i)
			break
		}
	}
	return index
}

大功告成!

有任何问题请留言咨询,着急请+企鹅1140559610有源码

相关推荐
Ama_tor2 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
一只一只妖13 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
编程毕设14 小时前
基于小程序的智能停车管理系统设计与开发
小程序
Kelaru16 小时前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project
初晨未凉17 小时前
uniapp返回webview返回小程序并且跳转回webview
小程序·uni-app
Python智慧行囊20 小时前
微信小程序交互精髓:点击操作与状态管理实战
微信小程序·小程序·交互
paopaokaka_luck2 天前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
春哥的研究所2 天前
AI人工智能名片小程序源码系统,名片小程序+分销商城+AI客服,包含完整搭建教程
人工智能·微信小程序·小程序
paopaokaka_luck2 天前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序