uni-app刮奖

最新推荐文章于 2024-12-11 20:13:02 发布

原创

最新推荐文章于 2024-12-11 20:13:02 发布 · 4.1k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍了使用uni-app创建刮奖效果的过程，重点讨论了在小程序中遇到的canvas层级问题和无法操作DOM的限制，并提供了相应的解决方案。

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

uni-app的刮奖效果，要注意的点：

1.小程序的canvas层级问题（可用cover-view规避）

2.不能操作dom

以下是uni-app刮奖效果的代码：

<template>
  <!-- 刮奖 -->
  <view v-else class="scratch">
    <view class="box">
      <!-- 刮奖结果图片 -->
      <image :src="domain+prize_img" class="img"></image>
      <!-- 刮奖canvas容器 -->
      <canvas
        class="canvas-box"
        canvas-id="canvas-id"
        :disable-scroll="true"
        @touchstart="touchStart"
        @touchmove="touchMove"
        @touchend="touchEnd"
      ></canvas>
      <!-- 刮奖前提示消息，开始刮奖后隐藏 -->
      <cover-view class="tip" v-if="!toDraw">
        <cover-view class="text">
          <cover-view class="text-tip">你还有</cover-view>
          <cover-view class="light">1</cover-view>
          <cover-view class="text-tip">次刮奖机会</cover-view>
        </cover-view>
        <!-- 开始刮奖按钮 -->
        <cover-view class="btn" @tap="scratchStart()">
          <cover-image :src="domain + '/front/img/scratch-btn-bg.png'" class="btn-img"></cover-image>
          <cover-view class="text">立即刮奖</cover-view>
        </cover-view>
      </cover-view>
      <!-- 如果后端没有不中奖的图，则不中奖时默认显示 -->
      <view v-if="hasDraw" class="award-box">
        <text class="text">谢谢参与</text>
      </view>
    </view>
  </view>
</template>

<script>
import Scratch from '@/utils/scratch.js'