uniapp九宫格抽奖

效果如图：

这里用了一个 uniapp的一个插件贴个地址 https://100px.net/usage/uni-app.html

npm 安装：
npm install uni-luck-draw也可以选择通过 HBuilderX 导入插件： https://ext.dcloud.net.cn/plugin?id=3499然后引入注册组件即可

使用

<LuckyGrid ref="LuckDraw" width="540rpx" height="490rpx" :prizes="prizes" :blocks="blocks" :buttons="buttons":default-style="defaultStyle" :active-style="activeStyle" @start="startCallBack" @end="endCallBack" />

import LuckyGrid from 'uni-luck-draw/lucky-grid' // 九宫格
components: {LuckyGrid,},

 startCallBack() {this.$refs.LuckDraw.play()this.getaward()var that = thissetTimeout(() => {this.$refs.LuckDraw.stop(that.idIndex)}, 2000)},endCallBack(prize) {alert(`恭喜你获得大奖: ${prize.title}`)},

奖项配置后台数据拿到，除了最外部边框图片不能配置，其他基本都能实现，像iphone4 这种高度和宽度设置差不多的话最底下有点显示不全，检查元素也都占满了，目前我的解决的办法是把配置高度调低，后面有好的解决方法再分享

uniapp九宫格抽奖相关推荐

uniapp 九宫格抽奖
git地址去git下载呦!这里直截取了部分代码这里只处理了样式以及js的关键问题!具体内容要对接自己的业务九宫格抽奖 /*func业务逻辑(带返回值)func2 判断(返回值为true/fals ...
uniapp 九宫格抽奖功能
<template><view class="bg"><view class="container"><view cl ...
uni-app - 九宫格老虎机抽奖机插件源码（支持服务端API接口控制最终中奖的奖品，自定义组件可随意配置和控制，带组件文档轻松 DIY 自己的营销页抽奖机）幸运抽奖圆形大转盘插件组件
前言如果您需要圆形大转盘抽奖机(如下图所示),请访问:这篇文章. 关于九宫格式老虎机宫格跳动抽奖,网上的大部分源码非常乱且无注释,根本无法改造, 本文提供的组件源码,代码干净整洁注释详细,并且配备超 ...
Vue实现3*3九宫格抽奖（并拓展实现n*n多宫格抽奖）
九宫格抽奖,包括幸运大转盘,已经在不管是电商还是日常网页中已经算是比较常见的页面效果了(此处点名批评pdd),那么如何用Vue来实现九宫格以及后续的十二宫格,十六宫格等多宫格抽奖组件呢? 先上效果图: ...
九宫格抽奖转盘源码分析
效果如上图所示,下面对其实现代码进行分析,看能不能破解其抽奖规则.需要引入jquery-1.8.3.min.js和images/9张图片. <!DOCTYPE html PUBLIC ...
python 还原九宫格图片_用Python做一个好玩的朋友圈九宫格抽奖
最近在朋友圈看到个好玩的抽奖九宫格: 随便点开一个: 设计思路以朋友圈中看到的1号图做参考,我们需要准备 300*900 的白色底图,搞笑表情图,广告语,中间一个醒目的数字编号,外加下方的嘲讽&qu ...
九宫格抽奖V1.3.26正版
简介: 版本号:1.3.26 –九宫格抽奖 1.增加活动内粉丝列表直接修改积分/余额的功能: 2.修复手台手动发送积分/余额时无法到账的问题. 1.支持多活动同时进行,互不影响: 2.可设置每天可抽奖 ...
基于React跑一个简易版九宫格抽奖
写在前面,年会将至,需求自然也跟各种抽奖有关啦.最近刚好接了一个紧急的九宫格抽奖需求,顺便也记录一下撸这个简易九宫格的过程吧. 本文可能涉及以下内容: 九宫格布局九宫格动效抽奖逻辑处理前后端联调 ...
女友的生日礼物能随便嘛？Python小妙招：制作一款出圈九宫格抽奖小程序。
导语上一期文章是写的九宫格切图,都说很好看~朋友圈的九宫格也大受欢迎! 其实吧:最近女朋友要生日了,我问她要什么吧,她就说"随便",我这一想,顿时恼火啊,说随便,但是当男朋友的也 ...

uniapp九宫格抽奖

uniapp九宫格抽奖相关推荐

最新文章

热门文章