淘宝小程序九宫格抽奖

淘宝小程序的九宫格抽奖功能，同理功能代码可根据指定小程序规则调整事件，此逻辑可适配所有小程序功能开发。

效果图：

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 ...
淘宝小程序体验优化：数据分析和优化实践
作者:莫绪旻(向屿) 淘宝小程序已经走过若干个双十一,淘宝开放业务有序铺开.体验优化是个老生常谈的话题,如何让小程序跑得又稳又快,成了我们最大的挑战之一. 写在前面如何定义好的体验过去我们定义这个 ...
超详细淘宝小程序的接入开发步骤
本文是向大家介绍的关于工作中遇到的如何对接淘宝小程序开发的步骤,它能够帮助大家省略在和淘宝侧对接沟通过程中的一些繁琐问题,便捷大家直接快速开展工作~~ 一.步骤演示 1.首先我们打开淘宝开放平台,进入 ...
淘宝小程序（商家应用）开发提前需要了解的一些概念
规定:淘宝小程序即淘宝商家应用.下文中只称作淘宝小程序,二者概念一致. 一:概念和业务场景概念: 因为淘宝小程序是从支付宝小程序迁移过来的.用的同一套框架.所以你需要先通读一遍商家应用文档(淘宝小程 ...
淘宝小程序游戏迁移Laya引擎
淘宝小程序游戏迁移Laya引擎 1. 目录结构 bin -- 当前项目的输出文件 laya -- 存放UI项目 assets -- 图片,音频资源目录 pages -- .scene 场景文件 key ...
淘宝小程序还可以这么玩！私域互动实践总结
简介:小程序创意互动项目,作为淘宝购物小程序全面提升消费体验和满足商家个性化运营的重点项目之一,从 2020 年 3 月底正式 KO 到今年双11,已经经历了多次迭代.在购物小程序技术.产品.运营团队 ...
淘宝小程序的坑（持续更新）
1. 淘宝小程序 ui 组件更新缓慢(基本不更新) form组件 onFormChange 当formItem field 没有值的时候返回对应的name 为空 tab 返回的index 会加上 ...
淘宝小程序表单组件checkbox的默认样式修改
场景每款产品都会有自己的定制化UI,这两天遇到的问题就是设计稿的复选框样式问题.自己试了很多种方法都没成功,百度查找资料或者相关代码,检索出来的都是与微信小程序相关的. 无奈之下,我在淘宝开放平台提 ...

淘宝小程序九宫格抽奖

淘宝小程序九宫格抽奖相关推荐

最新文章

热门文章

淘宝小程序 九宫格抽奖

淘宝小程序 九宫格抽奖相关推荐

最新文章

热门文章

淘宝小程序九宫格抽奖

淘宝小程序九宫格抽奖相关推荐