uniapp九宫格概率抽奖功能

最新推荐文章于 2025-03-12 17:05:07 发布

&ACE&

最新推荐文章于 2025-03-12 17:05:07 发布

阅读量801

点赞数 7

文章标签： uni-app 数据库

本文链接：https://blog.youkuaiyun.com/weixin_59525879/article/details/135563777

版权

这篇文章描述了一个包含抽奖功能的移动应用界面，使用了Vue.js进行开发，包括导航栏、按钮交互、图片显示以及定时抽奖逻辑。内容涉及UV-Overlay、Modal、导航条、轮播图和数据请求等技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view class="">
		<uv-overlay :show="show" @click="show = false">
			<uv-modal ref="modal" title="抽奖活动" :content='draw[0].active.content' @confirm="confirm"></uv-modal>
		</uv-overlay>
		<view style="margin-top: 40px;">
			<uv-navbar title="抽奖">
				<template v-slot:left>
					<view class="uv-nav-slot">
						<uv-icon name="arrow-left" size="19" @tap="leftClick"></uv-icon>
						<uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>
						<uv-icon name="home" size="20" @tap="home"></uv-icon>
					</view>
				</template>
			</uv-navbar>
		</view>
		<view class="draw">
			<image src="https://7up.pics/images/2023/12/26/img17704218ad045b198.png" mode="" class="draw_one"
				@tap="click">
			</image>
			<view class="last">
				<view class="draws_one" :style="'background-color:' +(back==1?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_two" :style="'background-color:' +(back==2?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_three" :style="'background-color:'+ (back==3?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_four" :style="'background-color:'+ (back==4?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_five" :style="'background-color:'+ (back==5?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_six" :style="'background-color:'+ (back==6?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_seven" :style="'background-color:'+ (back==7?'#F9DE23':'')" v-if="type==false">
				</view>
				<view class="draws_eight" :style="&