撸一个小程序九宫格抽奖
时间:2019-09-25
本文章向大家介绍撸一个小程序九宫格抽奖,主要包括撸一个小程序九宫格抽奖使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
老规矩,先上图
json文件配置
{ "navigationStyle": "custom" }
wxml:
<view class="turntable-area"> <view class="turntable"> <view class="dot" wx:for="{{10}}" wx:key="index"> <text wx:for="{{8}}" wx:key="index"></text> </view> <view class="prize"> <view class="p-item"> <view class="pi-item" style='opacity:{{list[index].opa}}' wx:for="{{3}}" wx:key="index"> <view class="p-info"> <image class="p-cover" mode="aspectFit" src="{{list[index].imgUrl}}"></image> <view class="p-name">{{list[index].name}}</view> </view> </view> </view> <view class="p-item"> <view class="pi-item" style='opacity:{{list[7].opa}}'> <view class="p-info"> <image class="p-cover" mode="aspectFit" src="{{list[7].imgUrl}}"></image> <view class="p-name">{{list[7].name}}</view> </view> </view> <view class="pi-item {{isDisabled?'btn-lottery-disabled':'btn-lottery'}}" bindtap="startLucks"> <view class="p-info"> <view class="p-name">立即抽奖</view> </view> </view> <view class="pi-item" style='opacity:{{list[3].opa}}'> <view class="p-info"> <image class="p-cover" mode="aspectFit" src="{{list[3].imgUrl}}"></image> <view class="p-name">{{list[3].name}}</view> </view> </view> </view> <view class="p-item"> <view class="pi-item" style='opacity:{{list[index===0?6:index===1?5:4].opa}}' wx:for="{{3}}" wx:key="index"> <view class="p-info"> <image class="p-cover" mode="aspectFit" src="{{list[index===0?6:index===1?5:4].imgUrl}}"></image> <view class="p-name">{{list[index===0?6:index===1?5:4].name}}</view> </view> </view> </view> </view> </view> </view>
wxss:
.turntable-area { display: flex; align-items: center; justify-content: center; height: 100vh; } .turntable-area .turntable { width: 657rpx; height: 488rpx; border-radius: 15rpx; background: #ffd65b; position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0 10rpx; } .turntable-area .turntable .dot { display: flex; align-items: center; justify-content: space-between; padding: 10rpx 0; flex-direction: column; height: 100%; } .turntable-area .turntable .dot text { width: 18rpx; height: 18rpx; border-radius: 50%; box-shadow: 0px 1rpx 1rpx 0px rgba(255, 114, 0, 0.75); background: #fe3057; } .turntable-area .turntable .dot:nth-child(2n+1) text { background: #fff8ba; } .turntable-area .turntable .dot text:nth-child(2n+1) { background: #fff8ba; } .turntable-area .turntable .dot:nth-child(2n+1) text:nth-child(2n+1) { background: #fe3057; } .turntable-area .turntable .prize { position: absolute; top: 38rpx; left: 38rpx; width: 580rpx; height: 412rpx; background: #fc0; border-radius: 10rpx; } .p-item { display: flex; align-items: center; margin: 4rpx 6rpx 0 6rpx; } .p-item .pi-item { flex: 1; display: flex; height: 132rpx; background: #ffe1df; border-radius: 10rpx; } .p-item .pi-item + .pi-item { margin-left: 4rpx; } .p-info { background: #fff; height: 120rpx; width: 100%; border-radius: 10rpx; display: flex; align-items: center; justify-content: center; flex-direction: column; } .p-info .p-cover { width: 102rpx; height: 71rpx; } .p-info .p-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
js:
// 计数器 let interval = null // 值越大旋转时间约长 let intime = 50 Page({ /** * 页面的初始数据 */ data: { list: [ { opa: 0.9, imgUrl: 'http://www.modo5.com/images/gift.png', name: "iPad" }, { opa: 0.9, imgUrl: 'http://www.modo5.com/images/gift.png', name: "再接再厉" }, { opa: 0.9, imgUrl: 'http://www.modo5.com/images/gift.png', name: "再接再厉" }, { opa: 0.9, imgUrl: 'http://www.modo5.com/images/gift.png', name: "iPad" }, { opa: 0.9, imgUrl: 'http://www.modo5.com/images/gift.png', name: "再接再厉" }, { opa: 0.9, imgUrl: 'http://www.modo5.com/images/gift.png', name: "再接再厉" }, { opa: 0.9, imgUrl: 'http://www.modo5.com/images/gift.png', name: "iPad" }, { opa: 0.9, imgUrl: 'http://www.modo5.com/images/gift.png', name: "再接再厉" }, ], luckPosition: 0, isDisabled: false }, //点击抽奖按钮 startLucks() { let vm = this let { luckPosition, list, isDisabled } = vm.data if (isDisabled){ return } if (!isDisabled) { //判断中奖位置格式 if (luckPosition == null || isNaN(luckPosition) || luckPosition > 7) { wx.showModal({ title: '提示', content: '系统发生错误,请稍后重试', showCancel: false }); return; } //设置按钮不可点击 vm.setData({ isDisabled: true }) //清空计时器 clearInterval(interval); let index = 0; //循环设置每一项的透明度 interval = setInterval(() => { if (index > 7) { index = 0; list[7].opa = 0.9 } else if (index != 0) { list[index - 1].opa = 0.9 } list[index].opa = 1; index++; vm.setData({ list }) }, intime); //模拟网络请求时间 设为两秒 var stoptime = 2000; setTimeout(() => { vm.stop(luckPosition); }, stoptime) } }, stop(which) { let vm = this; let { list } = vm.data //清空计数器 clearInterval(interval); //初始化当前位置 let current = -1; for (let i = 0; i < list.length; i++) { if (list[i].opa == 1) { current = i; } } //下标从1开始 let index = current + 1; vm.stopLuck(which, index, intime, 10); }, stopLuck(which, index, time, splittime) { let vm = this; let { list } = this.data //值越大出现中奖结果后减速时间越长 setTimeout(() => { //重置前一个位置 if (index > 7) { index = 0; list[7].opa = 0.9 } else if (index != 0) { list[index - 1].opa = 0.9 } //当前位置为选中状态 list[index].opa = 1; vm.setData({ list }) //如果旋转时间过短或者当前位置不等于中奖位置则递归执行 //直到旋转至中奖位置 if (time < 400 || index != which) { //越来越慢 splittime++; time += splittime; //当前位置+1 index++; vm.stopLuck(which, index, time, splittime); } else { //1秒后显示弹窗 setTimeout(() => { if (which == 0) { //中奖 wx.showModal({ content: '恭喜获得:' + list[which].name, showCancel: false, confirmColor: "#F8C219", success: res => { if (res.confirm) { //设置按钮可以点击 vm.setData({ isDisabled: false }) vm.loadAnimation(); } } }); } else { //未中奖 wx.showModal({ content: '很遗憾未中奖', showCancel: false, confirmColor: "#F8C219", success: res => { if (res.confirm) { //设置按钮可以点击 vm.setData({ isDisabled: false }) vm.loadAnimation(); } } }); } }, 1000); } }, time); }, loadAnimation() { let vm = this; let index = 0; let { list } = vm.data clearInterval(interval) interval = setInterval(() => { if (index > 7) { index = 0; list[7].opa = 0.9 } else if (index != 0) { list[index - 1].opa = 0.9 } list[index].opa = 1; index++; vm.setData({ list }) }, 1000); }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { this.loadAnimation(); }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { //清空计时器 clearInterval(interval); } })
撸完收工
原文地址:https://www.cnblogs.com/Leesttee/p/11583280.html
- Python爬虫(十六)_JSON模块与JsonPath
- 多类好米齐交易:域名776.cn近10万元结拍
- Python爬虫(八)_Requests的使用
- Python爬虫(十一)_案例:使用正则表达式的爬虫
- Python爬虫(十二)_XPath与lxml类库
- 区块链域名热度不减 健康类英文米近六位交易
- Python爬虫(九)_非结构化数据与结构化数据
- Python爬虫(十)_正则表达式
- python爬虫(四)_urllib2库的基本使用
- 投资人榴莲又卖出一枚三拼域名
- python爬虫(五)_urllib2:Get请求和Post请求
- python爬虫(七)_urllib2:urlerror和httperror
- 双拼市场好!米友售出域名chuijia.com
- Elasticsearch--数据索引
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 适配AndroidQ拍照和读取相册图片的实现方法
- 这是我的第一篇文章
- Android自定义View实现五子棋游戏
- AndroidQ(10)黑暗模式适配的实现
- Android仿微信录音功能
- android实现截图并动画消失效果的思路详解
- 位运算判断奇偶数
- Kotlin之在Gradle中无参(no-arg)编译器插件的使用详解
- android实现常驻通知栏遇到的问题及解决办法
- Android仿微信键盘切换效果
- Android实现WIFI和GPRS网络的切换
- 在VS2010里快要疯掉的hello world
- gh0st源码分析与远控的编写(三)
- Android自定义View实现五星好评效果
- Android通过ViewModel保存数据实现多页面的数据共享功能