抽奖组件（老虎机）lucky-canvas组件

在这里插入图片描述

安装插件
HBuilderX 导入插件： https://ext.dcloud.net.cn/plugin?id=3499
npm 安装：npm install @lucky-canvas/uni
yarn 安装：yarn add @lucky-canvas/uni
直接上代码

<view class="SlotMachine"><SlotMachineref="SlotMachine"width="550rpx"height="270rpx":blocks="blocks":prizes="prizes":slots="slots":defaultConfig="defaultConfig"@end='endCallBack'/>
</view>

import SlotMachine from '@/components/@lucky-canvas/uni/slot-machine' // 老虎机
data() {return {blocks: [{ padding: '13px'}],slots: [//order里为奖品下标   --依次展示的顺序，speed为转速{ speed: 5 ,order:[1,2,3,4,0]},//第一列奖品展示数据{ speed: 3 ,order:[2,3,4,0,1]},//第二列奖品展示数据{ speed: 5 ,order:[3,4,0,1,2]},//第三列奖品展示数据],prizes: [{nam: '50MB',imgs: [{src: require('../../../static/active/lhj/img-50mb.png')}]},//0{nam: '10分钟通话',imgs: [{src: require('../../../static/active/lhj/img-th10f.png')}]},//1{nam: '100金币',imgs: [{src: require('../../../static/active/lhj/img-100jb.png')}]},//2{nam: '10金币',imgs: [{src: require('../../../static/active/lhj/img-10jb.png')}]},//3{nam: 'mmd',imgs: [{src: require('../../../static/active/lhj/img-mmd.png')}]},//4],    defaultConfig:{rowSpacing: '50rpx',},}},components: {SlotMachine,},that.$refs.SlotMachine.play() //组件开始旋转let priceIndex = 0//中奖对应的奖品下标setTimeout(() => {// 假设后端返回的中奖索引是0// 调用stop停止旋转并传递中奖索引that.$refs.SlotMachine.stop(priceIndex-0);//stop-停止的位置}, 3000)  // 抽奖结束触发回调endCallBack (prize) {// 奖品详情prize为中奖的奖品信息}

如需要不同奖品池的切换时可以把奖品都放进prizes数组里在slots数组里面修改需要渲染奖品的下标即可，如

this.slots= [  //渲染奖品池下标为2，3，4的奖品{ speed: 5 ,order:[3,4,2]},{ speed: 3 ,order:[4,2,3]},{ speed: 5 ,order:[2,3,4]},            ]

抽奖组件（老虎机）lucky-canvas组件相关推荐

【微信小程序之画布】一：canvas组件
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 此文章主要是对canvas组件的介绍与基本的使用.在组件中绘画了一条固定的直线. 我们先了解一下can ...
UGUI组件之Canvas 组件简单笔记
Canvas 组件介绍 Canvas 组件的用途是用于 UGUI 系统内的 UI 游戏物体的渲染. 如果没有该组件,所有的 UGUI 游戏物体都将无法显示. 而 Canvas 组件本身又分为三种渲染模 ...
Tkinter的Canvas组件
一.简介 Canvas组件,是一个可以绘制界面的组件, Canvas组件是通用的组件,通常用来显示或编辑图形,可以用来绘制直线.圆形.多边形,甚至是绘制其他组件二.用Canvas绘制简单的直线与矩形 ...
HTML5 Canvas组件绘制太极图案
一实现思路: 实现原理主要是利用HTML5的Canvas组件提供的path函数功能来绘制圆,首先绘制两个半圆,分别为黑色和白色,组成一个圆,绘制完成以后再分别绘制一个黑色和白色的圆在绘制好的黑白圆 ...
SwiftUI WWDC21 新绘图和动画组件之 01 Canvas 支持即时模式绘制的视图类型
SwiftUI WWDC21 新绘图和动画组件之 01 Canvas 支持即时模式绘制的视图类型 Canvas 一种支持即时模式绘制的视图类型. struct Canvas<Symbols> ...
【微信小程序】解决canvas组件永远在最高层问题
详情参考微信小程序文档原生组件 1.为什么canvas组件总是会在最上层? 由于canvas组件是原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生 ...
微信小程序-解决canvas组件永远在最高层问题
由于canvas组件是原生组件,原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 为了解决原生组件层级最高的限制.小程序专门提供了 cover-vi ...
微信小程序画布Canvas组件touchend事件不触发处理
一.摘要在微信小程序手势图案锁屏.解锁实现并提供onSuccess等回调一文中,用Canvas画布组件实现了类似Android和Iphone的图案锁屏.解锁功能,除去偶尔卡顿.滑动不连续外,其它都还 ...
Vue组件中使用canvas实现蜂巢效果的一些尝试
Vue组件中使用canvas实现蜂巢效果的一些尝试前段时间,看到D3.js的官方网站的蜂巢效果,感觉不错,不过一直没有时间去实际的实现下,借这次机会,算是填了前面的坑~~,先来看看d3.js的效 ...
【vue uniapp 小程序抽奖转盘老虎机和九宫格】
vue uniapp 小程序抽奖转盘老虎机和九宫格 1.npm 下载插件 # npm 安装 npm install @lucky-canvas/vue@latest# 或者 yarn 安装 yarn ...

抽奖组件（老虎机）lucky-canvas组件

抽奖组件（老虎机）lucky-canvas组件相关推荐

最新文章

热门文章