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

本文介绍了如何在微信小程序中制作一个吸引人的抽奖界面。内容包括设计思路,展示了一个包含8个抽奖按钮、1个开始按钮及背景图的布局。通过分享js、wxml和wxss代码段,详细阐述了实现过程。
摘要由CSDN通过智能技术生成

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

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

var app = getApp()
Page({
   
 data: {
   
  circleList: [],//圆点数组
  awardList: [],//奖品数组
  colorCircleFirst: '#FFDF2F',//圆点颜色1
  colorCircleSecond: '#FE4D32',//圆点颜色2
  colorAwardDefault: '#F5F0FC',//奖品默认颜色
  colorAwardSelect: '#ffe400',//奖品选中颜色
  indexSelect: 0,//被选中的奖品index
  isRunning: 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 = 15
    leftCircle = 620;
   } else if (i < 12) {
   
    topCircle = topCircle + 94;
    leftCircle = 620;
   } else if (i == 12) {
   
    topCircle = 565;
    leftCircle = 620;
   } else 
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值