“淘宝小程序“ 九宫格抽奖功能
淘宝小程序的九宫格抽奖功能,同理功能代码可根据指定小程序规则调整事件,此逻辑可适配所有小程序功能开发。
效果图:
index.axml
<!-- 九宫格部分 -->
<view class="container_out"><view class="container_in"><view class="content_out" a:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;"><image mode="scaleToFill" a:if="{{index !== indexSelect}}" src="https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/luckdraw/bottom1.png" /><image mode="scaleToFill" a:if="{{index === indexSelect}}" src="https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/luckdraw/bottom2.png" /><image mode="scaleToFill" src="{{item.imageAward}}" /></view><view class="luckdraw_btn"><image mode="scaleToFill" src="https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/luckdraw/luckdraw_btn_bg.png" /><view class="luckdraw_btn_texe">剩余次数<text>{{timesNum}}</text>次</view><view class="luckdraw_btn_nb" a:if="{{isRunning}}" onTap="luckDrawEle"></view><view class="luckdraw_btn_nb" a:if="{{!isRunning}}"></view></view></view>
</view>
index.acss
page {background: #f7f7f7;
}.bodyCon{position: fixed;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden;
}image{width: 100%;height: 100%;
}/* 九宫格 */
.container_out {position: absolute;top: 0;right: 0;left: 0;bottom: 0;margin: auto;width: 649rpx;height: 774rpx;background: rgba(0, 0, 0, 0.5);border-radius: 20rpx;}.container_in {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 589rpx;height: 713rpx;}.content_out {position: absolute;width: 178rpx;height: 218rpx;}.content_out image{position: absolute;top: 0;left: 0;}.luckdraw_btn {position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;width: 178rpx;height: 218rpx;}.luckdraw_btn_texe{position: absolute;bottom: 0;left: 0;width: 100%;height: 57rpx;text-align: center;line-height: 57rpx;font-size: 20rpx;color: #2a2a2a;}.luckdraw_btn view text{margin: 0 8rpx;font-size: 25.3rpx;}.luckdraw_btn_nb{position: absolute;top: 0;left: 0;width: 178rpx;height: 218rpx;
}
index.js
Page({data: {indexSelect: 0,//被选中的奖品indexisRunning: true,//是否正在抽奖index: 1,//中奖的索引 这个是拿到后端接口后赋的值,第几个奖品times: 3, //转盘转的次数imageAward: ['https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize1.png?v=1.0.3','https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize2.png?v=1.0.3','https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize3.png?v=1.0.3','https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize4.png?v=1.0.3','https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize5.png?v=1.0.3','https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize6.png?v=1.0.3','https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize7.png?v=1.0.3','https://resources.easy-h5.com/WLZ/oppoToPlayXcx/img/prize/prize8.png?v=1.0.3',],//奖品图片数组timesNum: 1, // 抽奖次数 可在拿到后端接口后赋的值,剩余抽奖次数},onLoad() {// 初始化九宫格样式this.initStyle();},async initStyle() {//奖品item设置let awardList = [];//间距,怎么顺眼怎么设置吧.let topAward = 0;let leftAward = 0;for (let j = 0; j < 8; j++) {if (j == 0) {topAward = 0;leftAward = 0;} else if (j < 3) {topAward = topAward;//178是宽,27是间距.下同leftAward = leftAward + 178 + 27;} else if (j < 5) {leftAward = leftAward;//218是高,30是间距,下同topAward = topAward + 218 + 30;} else if (j < 7) {leftAward = leftAward - 178 - 27;topAward = topAward;} else if (j < 8) {leftAward = leftAward;topAward = topAward - 218 - 30;}let imageAward = this.data.imageAward[j];awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });}this.setData({awardList: awardList})},// 抽奖事件async luckDrawEle() {const _this = this;if (!_this.data.isRunning) return;_this.data.isRunning = false;if (_this.data.timesNum === 0) {my.alert({title: '暂无抽奖次数',});_this.data.isRunning = true;return false;}// 计算剩余次数 可在拿到后端接口后赋的值,剩余抽奖次数_this.data.timesNum = _this.data.timesNum - 1;_this.setData({timesNum: _this.data.timesNum})let indexSelect = 0let i = 0;let timer = setInterval(function () {indexSelect++;//这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度i += 30;if (i > _this.data.times * 8 * 30 + _this.data.index * 30 - 30) {//去除循环clearInterval(timer);//获奖提示setTimeout(() => {my.alert({title: '中奖索引为:' + _this.data.index,});_this.data.isRunning = true;_this.setData({isRunning: _this.data.isRunning})}, 300)}indexSelect = indexSelect % 8;_this.setData({indexSelect: indexSelect})}, (100 + i))},
})
以上就是所有的代码了,根据项目需求自作调整
“淘宝小程序“ 九宫格抽奖功能相关推荐
- 淘宝小程序 九宫格抽奖
淘宝小程序的九宫格抽奖功能,同理功能代码可根据指定小程序规则调整事件,此逻辑可适配所有小程序功能开发. 效果图: index.axml <!-- 九宫格部分 --> <view cl ...
- 哔哩哔哩淘宝小程序盲盒抽奖实践
目录 背景 名词解释 整体业务流程 技术实现 调用链路 云开发( Serverless ) 云开发的限制 编写云函数 怎么拿到授权查询轻店铺用户订单 轻店铺云网关 数字签名网关 网关技术选型 Vert ...
- IVX低代码平台开发——微信小程序实现抽奖功能
写在前面 通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录 写在前面 iVX开发 抽奖功能实现 iVX开发 基本介绍 iVX是一个 "零代码&quo ...
- 超详细淘宝小程序的接入开发步骤
本文是向大家介绍的关于工作中遇到的如何对接淘宝小程序开发的步骤,它能够帮助大家省略在和淘宝侧对接沟通过程中的一些繁琐问题,便捷大家直接快速开展工作~~ 一.步骤演示 1.首先我们打开淘宝开放平台,进入 ...
- 淘宝小程序还可以这么玩!私域互动实践总结
简介:小程序创意互动项目,作为淘宝购物小程序全面提升消费体验和满足商家个性化运营的重点项目之一,从 2020 年 3 月底正式 KO 到今年双11,已经经历了多次迭代.在购物小程序技术.产品.运营团队 ...
- 淘宝小程序体验优化:数据分析和优化实践
作者:莫绪旻(向屿) 淘宝小程序已经走过若干个双十一,淘宝开放业务有序铺开.体验优化是个老生常谈的话题,如何让小程序跑得又稳又快,成了我们最大的挑战之一. 写在前面 如何定义好的体验 过去我们定义这个 ...
- 淘宝小程序(商家应用)开发提前需要了解的一些概念
规定:淘宝小程序即淘宝商家应用.下文中只称作淘宝小程序,二者概念一致. 一:概念和业务场景 概念: 因为淘宝小程序是从支付宝小程序迁移过来的.用的同一套框架.所以你需要先通读一遍商家应用文档(淘宝小程 ...
- 淘宝小程序游戏迁移Laya引擎
淘宝小程序游戏迁移Laya引擎 1. 目录结构 bin -- 当前项目的输出文件 laya -- 存放UI项目 assets -- 图片,音频资源目录 pages -- .scene 场景文件 key ...
- 淘宝小程序的坑(持续更新)
1. 淘宝小程序 ui 组件更新缓慢(基本不更新) form组件 onFormChange 当formItem field 没有值的时候 返回对应的name 为空 tab 返回的index 会加上 ...
最新文章
- python bound unbound method
- mysql存储base64位用什么类型_【漫画】面试现场:为什么MySQL数据库要用B+树存储索引?...
- sas university edition在ubuntu中的使用
- python查找两个数组中相同的元素_匹配两个numpy数组以找到相同的元素
- GIT提交message规范
- 《你不知道的JavaScript》中卷 KYLE SIMPSON 著 单业 姜南 译
- Python入门-散点图绘制
- java.net.URISyntaxException: Illegal character in query at index,http请求url中有非法字符导致
- PyTorch——torch.Tensor与np.ndarray(NumPy)之间的类型转换
- 未来五年的全球绿色数据中心市场的增长趋势和预测
- 【bzoj2834】回家的路 分层图最短路
- SQL Server里的 ISNULL 与 NULLIF
- linuxamp;amp;shell学习(积累中。。。)
- 计算机开机b00t设置,电脑boot启动项设置
- 数字 显示为LED 字体
- 7年一回首,流年似水
- 不是广告!!迎来1w粉丝,本号送书啦!|原创
- 苹果电脑mac os+win双系统在线安装回macos
- 微信小程序:个人页面/我的页面/资料页面
- Python数据分析上机
热门文章
- C++游戏编程教程(二)
- 谷歌SEO优化 定制推WS获客软件引流时代做全渠道的营销
- lol提示游戏环境异常重启计算机,lol游戏环境异常请重启机器,小编教你lol游戏环境异常请重启机器怎么解决...
- 【黑科技】钉钉自动打卡
- iFunk游戏本性能大预测
- Pr 2019 快速入门(1)
- 从“在快餐店吃饭”到Command模式(一)
- 全自动照片增强器:Photolemur 3 Mac中文版
- 「RISC-V Arch」 初识 RISC-V
- 检查echo服务(TCP),quote服务(qotd)正在运行漏洞解决方案