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

最新推荐文章于 2024-08-15 09:33:26 发布

行走的bug机

最新推荐文章于 2024-08-15 09:33:26 发布

阅读量2.2k

点赞数 3

分类专栏：微信小程序文章标签：小程序 javascript 前端

本文链接：https://blog.csdn.net/gsgsgs1234/article/details/115765959

版权

本文介绍了如何在微信小程序中制作一个吸引人的抽奖界面。内容包括设计思路，展示了一个包含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