做一个好看的微信小程序抽奖页面

在微信小程序中做一个好看的抽奖界面
先上图片吧：

基本上格式就是八个抽奖按钮，中间一个开始按钮，后面在加一张好看的背景图就完事啦
接下来就是代码啦：
js中：

var app = getApp()
Page({data: {circleList: [],//圆点数组awardList: [],//奖品数组colorCircleFirst: '#FFDF2F',//圆点颜色1colorCircleSecond: '#FE4D32',//圆点颜色2colorAwardDefault: '#F5F0FC',//奖品默认颜色colorAwardSelect: '#ffe400',//奖品选中颜色indexSelect: 0,//被选中的奖品indexisRunning: false,//是否正在抽奖imageAward: ['https://img.coolcr.cn/2020/12/23/6d40279b20a0f.png','https://img.coolcr.cn/2020/12/23/0762b5d6f587f.png','https://img.coolcr.cn/2020/12/23/03d0ebc7df721.png','https://img.coolcr.cn/2020/12/23/20f3ae1193353.png','https://img.coolcr.cn/2020/12/23/33e147878b73a.png','https://img.coolcr.cn/2020/12/23/6137e50196a4e.png','https://img.coolcr.cn/2020/12/23/a7e51c830d55b.png','https://img.coolcr.cn/2020/12/23/c338bc5163113.png',],//奖品图片数组},onLoad: function () {var _this = this;//圆点设置var leftCircle = 7.5;var topCircle = 7.5;var circleList = [];for (var i = 0; i < 24; i++) {if (i == 0) {topCircle = 15;leftCircle = 15;} else if (i < 6) {topCircle = 7.5;leftCircle = leftCircle + 102.5;} else if (i == 6) {topCircle = 15leftCircle = 620;} else if (i < 12) {topCircle = topCircle + 94;leftCircle = 620;} else if (i == 12) {topCircle = 565;leftCircle = 620;} else if (i < 18) {topCircle = 570;leftCircle = leftCircle - 102.5;} else if (i == 18) {topCircle = 565;leftCircle = 15;} else if (i < 24) {topCircle = topCircle - 94;leftCircle = 7.5;} else {return}circleList.push({ topCircle: topCircle, leftCircle: leftCircle });}this.setData({circleList: circleList})//圆点闪烁setInterval(function () {if (_this.data.colorCircleFirst == '#FFDF2F') {_this.setData({colorCircleFirst: '#FE4D32',colorCircleSecond: '#FFDF2F',})} else {_this.setData({colorCircleFirst: '#FFDF2F',colorCircleSecond: '#FE4D32',})}}, 500)//奖品item设置var awardList = [];//间距,怎么顺眼怎么设置吧.var topAward = 25;var leftAward = 25;for (var j = 0; j < 8; j++) {if (j == 0) {topAward = 25;leftAward = 25;} else if (j < 3) {topAward = topAward;//166.6666是宽.15是间距.下同leftAward = leftAward + 166.6666 + 15;} else if (j < 5) {leftAward = leftAward;//150是高,15是间距,下同topAward = topAward + 150 + 15;} else if (j < 7) {leftAward = leftAward - 166.6666 - 15;topAward = topAward;} else if (j < 8) {leftAward = leftAward;topAward = topAward - 150 - 15;}var imageAward = this.data.imageAward[j];awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward });}this.setData({awardList: awardList})},//开始游戏startGame: function () {if (this.data.isRunning) returnthis.setData({isRunning: true})var _this = this;var indexSelect = 0var i = 0;var timer = setInterval(function () {indexSelect++;//这里我只是简单粗暴用y=30*x+200函数做的处理.可根据自己的需求改变转盘速度i += 30;if (i > 1000) {//去除循环clearInterval(timer)//获奖提示wx.showModal({title: '恭喜您',content: '获得了第' + (_this.data.indexSelect + 1) + "个优惠券",showCancel: false,//去掉取消按钮success: function (res) {if (res.confirm) {_this.setData({isRunning: false})}}})}indexSelect = indexSelect % 8;_this.setData({indexSelect: indexSelect})}, (200 + i))}
})

wxml中：

<view class="container-out">
<image class='background' src="https://img.coolcr.cn/2020/12/24/8b823815b413e.jpg" mode="aspectFill"></image><view class="circle" wx:for="{{circleList}}" style="top:{{item.topCircle}}rpx;left:{{item.leftCircle}}rpx;background-color: {{(index%2==0)?colorCircleFirst:colorCircleSecond}};"></view><view class="container-in"><view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};"><image class="award-image" src="{{item.imageAward}}" ></image></view><view class="start-btn" bindtap="startGame" style=" background-color:{{isRunning?'#e7930a':'#ffe400'}}">START</view></view>
</view>

wxss中：

/**index.wxss**/.container-out {height: 600rpx;width: 650rpx;background-color: #b136b9;margin: 100rpx auto;border-radius: 40rpx;box-shadow: 0 10px 0 #871a8e;position: relative;}.container-in {width: 580rpx;height: 530rpx;background-color: #871a8e;border-radius: 40rpx;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}/**小圆球box-shadow: inset 3px 3px 3px #fff2af;*/.circle {position: absolute;display: block;border-radius: 50%;height: 20rpx;width: 20rpx;}.content-out {position: absolute;height: 150rpx;width: 166.6666rpx;background-color: #f5f0fc;border-radius: 15rpx;box-shadow: 0 5px 0 #d87fde;}/**居中 加粗*/.start-btn {position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;border-radius: 15rpx;height: 150rpx;width: 166.6666rpx;background-color: #ffe400;box-shadow: 0 5px 0 #e7930a;color: #f6251e;text-align: center;font-size: 55rpx;font-weight: bolder;line-height: 150rpx;}.award-image {position: absolute;margin: auto;top: 0;left: 0;bottom: 0;right: 0;height: 140rpx;width: 130rpx;z-index: 1;}.container{width: 100%;height: 600rpx;margin: 0;padding: 0;position: relative;
}
image{width: 100%;height: 100%;position:fixed; background-size:100% 100%;z-index: -1;top:0;left: 0;
}
.up{position: absolute;z-index: 1;
}
.background {width: 100%;height: 100%;position:fixed; background-size:100% 100%;z-index: -1;}

就酱紫，一个抽奖的界面就做好了！

做一个好看的微信小程序抽奖页面相关推荐

【云开发】10分钟零基础学会做一个快递查询微信小程序，快速掌握微信小程序开发技能（轮播图、API请求）
大家好,我叫小秃僧这次分享的是10分钟零基础学会做一个快递查询微信小程序,快速掌握开发微信小程序技能. 这篇文章偏基础,特别适合还没有开发过微信小程序的童鞋,一些概念和逻辑我会讲细一点,尽可能用图说 ...
手把手教你做短视频去水印微信小程序（2-首页）
手把手教你做短视频去水印微信小程序系列教程(2-首页) 文章目录手把手教你做短视频去水印微信小程序系列教程(2-首页) 前言一.顶部banner 二.地址解析 1.整体代码 2. input框输入 ...
微信小程序抽奖简单功能实现
抽奖是一种常见的互动活动,在微信小程序中也有很多不同的实现方式.以下是一份简单的微信小程序抽奖源码,供参考:在 wxml 文件中添加抽奖的页面布局: <view class="cont ...
做一个很难的小程序是怎样的体验（一）
"小程序能做什么样的产品?" 这可能是我被问到最多的关于小程序的问题.通常我会说:理论上,小程序能力还挺完整的,大部分 Web 可以做的产品,都可以落地. 但理论终归是理论,唯有实 ...
PHP微信小程序/抽奖小程序开源源码
简介: PHP微信小程序/抽奖小程序开源源码网盘下载地址: http://kekewl.net/n066JfGL5sU0 图片:
微信小程序之页面打开数量限制
微信小程序之页面打开数量限制无论是在小程序还是APP中,打开一个页面其实就是创建了一个新的View对象,一层层叠加的.当点击页面的回退按钮就是把当前页面关闭. 这个过程中会涉及到一个问题,就是打开页 ...
uniapp开发微信小程序-4.页面跳转与横向滑动
uniapp开发微信小程序-4.页面跳转与横向滑动本篇文章主要是想记录一下横向滑动功能,备忘的同时给大家做个分享. 但既然是初级分享系列文章,为了方便新手朋友的上手工作,还是在此之前说一下页面跳转的 ...
微信小程序页面栈_微信小程序之页面传值(路由、页面栈、globalData、缓存)
1. 通过url带参数传递 1.1 固定参数传递例如,从 list 页面到 detail 页面, 传递一个或多个固定值 list页面传值: 点此进入 detail detail页面取值: onLoa ...
微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
笔者由于工作需要,曾经参加过一个微信小程序同 SAP 系统集成的项目,因此从零开始学习了微信小程序的开发知识.这里通过系列文章把自己所学分享出来,希望对相关学习者有所帮助. 本教程前面三篇文章: 微信 ...

做一个好看的微信小程序抽奖页面

做一个好看的微信小程序抽奖页面相关推荐

最新文章

热门文章