uniapp小程序抽奖怎么做？直接使用【almost-lottery转盘组件】或者【自定义宫格转盘】

ops/2024/12/21 12:42:37/

直接使用almost-lottery

地址：GitHub - ialmost/almost-components_uniapp: uni-app 使用的多端组件集合，支持APP、H5、小程序uni-app 使用的多端组件集合，支持APP、H5、小程序. Contribute to ialmost/almost-components_uniapp development by creating an account on GitHub.icon-default.png?t=O83Ahttps://github.com/ialmost/almost-components_uniapp

Almost-Lottery 是一个基于 uni-app 框架开发的抽奖转盘组件，适用于多种平台（如微信小程序、支付宝小程序、H5、App 等）。它通过 Canvas 绘制转盘，支持丰富的自定义配置，能够满足各种抽奖场景的需求。以下是对 Almost-Lottery 组件的详细介绍：

1. 功能概述

Almost-Lottery 提供了以下核心功能：

  • 奖品配置：支持自定义奖品文字、背景颜色、文字颜色、图片等。

  • 转盘样式：可配置转盘外环、抽奖按钮的图片，支持轮盘旋转或指针旋转。

  • 抽奖逻辑：内置抽奖概率、抽奖次数、付费抽奖等功能，支持自定义抽奖逻辑。

  • 平台兼容性：支持微信小程序、支付宝小程序、H5、App 等多种平台，兼容 Vue2，暂不支持 Vue3110。

2. 主要特性

  • 奖品区块配置：

    • 支持奇数个奖品，奖品数量尽量能被 360 整除。

    • 可配置奖品区块的背景颜色、文字颜色、描边颜色等110。

  • 转盘样式：

    • 支持自定义转盘外环和抽奖按钮的图片。

    • 支持配置转盘旋转或指针旋转，旋转动画时长和圈数可自定义110。

  • 抽奖逻辑：

    • 提供 draw-before、draw-start、draw-end 等事件钩子，开发者可以在这些钩子中实现自定义逻辑。

    • 支持中奖概率、抽奖次数、付费抽奖等业务逻辑110。

  • 缓存机制：

    • 支持开启画板缓存，避免在数据不变的情况下重复绘制，提升性能110。

3. 使用方法

3.1 安装与导入

  • 在 uni-app 项目中，可以通过 uni_modules 模式导入 Almost-Lottery 组件。

  • 在页面中引入组件并注册：

<template><almost-lottery:prizeList="prizeList":prizeIndex="prizeIndex"@draw-before="handleDrawBefore"@draw-start="handleDrawStart"@draw-end="handleDrawEnd"/>
</template><script>
import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue';export default {components: { AlmostLottery },data() {return {prizeList: [], // 奖品列表prizeIndex: -1, // 中奖下标};},methods: {handleDrawBefore(callback) {// 自定义抽奖前的逻辑callback(true); // 返回 true 表示允许抽奖},handleDrawStart() {// 抽奖开始时的逻辑},handleDrawEnd() {// 抽奖结束后的逻辑},},
};
</script>
3.2 配置项

  • prizeList：奖品列表，支持奇数个奖品，每个奖品包含 prizeId、prizeName、prizeImage 等字段110。

  • prizeIndex：中奖奖品的下标，抽奖结束后会自动重置为 -1110。

  • lotteryBg：转盘外环图片。

  • actionBg：抽奖按钮图片。

  • colors：奖品区块的背景颜色，支持交替颜色或自定义每个区块的颜色110。

3.3 事件钩子

  • @draw-before：抽奖开始前触发，开发者可以在此钩子中实现自定义逻辑，并通过 callback(true/false) 控制转盘是否启动110。

  • @draw-start：抽奖开始时触发。

  • @draw-end：抽奖结束时触发。

  • @finish：转盘绘制完成时触发，返回绘制结果110。

4. 示例项目

Almost-Lottery 提供了丰富的示例项目，开发者可以参考以下功能：

  • 中奖概率：建议由后端控制中奖概率，避免前端篡改110。

  • 抽奖次数：支持配置免费抽奖次数和付费抽奖逻辑110。

  • 付费抽奖：结合业务逻辑实现付费抽奖功能110。

5. 平台兼容性

  • 支持平台：微信小程序、支付宝小程序、H5、App 等。

  • 不支持平台：Vue3 和部分快应用平台110。

自定义宫格转盘

思路：设计页面，状态控制

排布奖品和按钮为宫格布局

<template>
<view class="container"><view class="my-lottery row-between wrap" v-if="status"><view v-for="(item, index) in lotteryData" :key="index" :class="(item.type == 999 ? 'lotty-btn' : 'lottery-item') + ' column-center ' + (activeIndex == index ? 'active' : '')" style="width: 180rpx;height: 180rpx;" @tap="onLotteryClick(item.type)"><image :src="item.image" style="width: 80rpx;height: 80rpx; border-radius: 8rpx;"></image><text :class="item.type == 999 ? 'xs mt20' : 'nr mt10'" :style="'color: ' + (item.type == 999 ? '#ED3720' : '#743C3C') + ';font-weight: 600;text-align: center;padding: 0 24rpx;'">{{item.name}}</text></view></view><view class="activity-null row-center" v-else>活动暂未开始</view>
</view>
</template>

开始抽奖，设置高亮宫格开始，计时器中控制下一个，根据轮训的索引值，在开始抽奖接口返回了中奖的索引之后，设置最后一步到位的状态。当然也需要在其中控制速度达到先快，后慢的体验优化。

startLotteryFun() {let {currentIndex} = this;let activeIndex = this.getHighLightItemIndexFun(currentIndex);this.activeIndex = activeIndexconst currentOrder = currentIndex % 8;this.currentIndex = ++currentIndex;console.log(77777123, currentIndex, this.circleTimes, this.luckyOrder, currentOrder)if (currentIndex > this.circleTimes + 8 && this.luckyOrder == currentOrder) {if (this.lotteryTimer) {clearTimeout(this.lotteryTimer);}setTimeout(() => {this.stopCallbackFun(LOTTERY_ORDER[this.luckyOrder]);setTimeout(() => {// this.reset();this.activeIndex = -1}, 1000);}, 500);} else {if (currentIndex < this.circleTimes) {this.speed -= 10} else if (currentIndex > this.circleTimes + 8 && this.luckyOrder == currentOrder + 1) {this.speed += 80} else {this.speed += 20}if (this.speed < 50) {this.speed = 50}this.lotteryTimer = setTimeout(this.startLotteryFun.bind(this), this.speed);}},// luckyIndex: 中奖在列表中的indexstopCallbackFun(luckyIndex) {this.reset()this.$emit("finish", {detail: this.result});},// 根据 currentIndex 获取当前应该高亮列表中的第几个奖品getHighLightItemIndexFun(currentIndex) {return LOTTERY_ORDER[currentIndex % LOTTERY_ORDER.length];},// 根据奖品在数据中的index，获取奖品在转盘中的位置getLuckyItemOrderFun(index) {},start(e) {console.log(887777, e, this.isLottery)// 如果还没开始转动,开始转动转盘if (!this.isLottery) {this.isLottery = truethis.userLotteryFun();}},// 停止转动stop(index, callback) {this.luckyOrder = this.getLuckyItemOrderFun(index);console.log("stop, ###", index);this._stopCallback = callback;},


http://www.ppmy.cn/ops/143759.html

相关文章

图书馆管理系统（四）基于jquery、ajax--完结篇

图书馆管理系统（四）基于jquery、ajax--完结篇

任务3.6 后端代码编写 任务描述 这个部分主要想实现图书馆管理系统的后端&#xff0c;使用 Express 框架来处理 HTTP 请求&#xff0c;并将书籍数据存储在一个文本文件 books.txt 中。 任务实施 3.6.1 引入模块及创建 Express 应用 const express require(express); cons…
阅读更多...
同源策略：为什么XMLHttpRequest不能跨域请求资源？

同源策略：为什么XMLHttpRequest不能跨域请求资源？

一.浏览器安全 浏览器安全可以分为三大块——Web页面安全、浏览器网络安全****和浏览器系统安全 假设&#xff0c;如果页面中没有安全策略的话&#xff0c;Web世界会是什么样子的呢&#xff1f; Web世界会是开放的&#xff0c;任何资源都可以接入其中&#xff0c;我们的网站可…
阅读更多...
Docker镜像制作

Docker镜像制作

目录 1. 镜像制作的原因和方式2. 快照方式制作镜像2.1 docker commit命令来制作镜像2.2 实战C HelloWorld 镜像制作 3. Dockerfile 制作镜像3.1 Dockerfile 是什么3.2 为什么需要 Dockerfile3.3 Dockerfile 指令3.3.1 指令清单3.3.2 FROM指令3.3.3 MAINTAINER指令3.3.4 LABEL指…
阅读更多...
【WPF】把DockPanel的内容生成图像

【WPF】把DockPanel的内容生成图像

要在WPF中将一个 DockPanel 的内容生成为图像并保存&#xff0c;可以按照与之前类似的步骤进行&#xff0c;但这次我们将专注于 DockPanel 控件而不是整个窗口。 DockPanel的使用 WPF&#xff08;Windows Presentation Foundation&#xff09;中的 DockPanel 是一种布局控件&…
阅读更多...
Hive内部表和外部表的区别

Hive内部表和外部表的区别

Hive是基于Hadoop的数据仓库工具&#xff0c;hive本身并不存储数据&#xff0c;而是将表数据文件存储在hdfs中&#xff0c;hive能将此数据文件映射为一张表&#xff0c;并提供解析编译sql的功能&#xff0c;将用户提交的sql转换为mr job&#xff0c;在mapreduce引擎上对数据进行…
阅读更多...
基于RK3588机器人控制器+3D视觉传感器的送餐机器人解决方案

基于RK3588机器人控制器+3D视觉传感器的送餐机器人解决方案

送餐机器人 通过搭载3D视觉传感器信迈机器人控制器&#xff0c;送餐机器人可以在复杂的餐厅环境中灵活避障通行&#xff0c;极大地提升餐品配送效率&#xff0c;改善用户用餐体验&#xff0c;并显著降低店家经营成本。 高峰期送餐难&#xff0c;曾一直是送餐机器人的行业痛点。…
阅读更多...
pip使用方法

pip使用方法

1. 安装包&#xff1a; pip install &#xff1a;安装指定的 Python 包。 pip install &#xff1a;安装特定版本的 Python 包。 pip install -r requirements.txt&#xff1a;从文件中读取依赖列表并安装所有列出的包。 pip install --pre &#xff1a;允许安装预发布或开发版…
阅读更多...
如何有效修复ffmpeg.dll错误：一站式解决方案指南

如何有效修复ffmpeg.dll错误：一站式解决方案指南

当您遇到提示“ffmpeg.dll文件丢失”的错误时&#xff0c;这可能导致相关的应用程序无法启动或运行异常。本文将详细介绍如何有效地解决ffmpeg.dll文件丢失的问题&#xff0c;确保您的应用程序能够恢复正常运行。 ffmpeg.dll是什么&#xff1f;有哪些功能&#xff1f; ffmpeg.…
阅读更多...
最新文章

Copyright @ 2022~2023