微信小程序实现简单九宫格抽奖

本文实例为大家分享了微信小程序实现简单九宫格抽奖的具体代码,供大家参考,具体内容如下

废话不多说,先上样板图

代码就先wxml文件:

<view id="container">
  <!--左上-->
  <view id="li" class='{{amplification_index===1?"indexli":""}}'>
    一等奖
    <view></view>
  </view>
  <!--上-->
  <view id="li" class='{{amplification_index===2?"indexli":""}}'>
    二等奖
    <view></view>
  </view>
  <!--右上-->
  <view id="li" class='{{amplification_index===3?"indexli":""}}'>
    三等奖
    <view></view>
  </view>
  <!--左-->
  <view id="li" class='{{amplification_index===8?"indexli":""}}'>
    八等奖
    <view></view>
  </view>
  <!--开始-->
  <a bindtap="startrolling">
    开始抽奖
  </a>
  <!--右-->
  <view id="li" class='{{amplification_index===4?"indexli":""}}'>
    四等奖
    <view></view>
  </view>
  <!--左下-->
  <view id="li" class='{{amplification_index===7?"indexli":""}}'>
    七等奖
    <view></view>
  </view>
  <!--下-->
  <view id="li" class='{{amplification_index===6?"indexli":""}}'>
    六等奖
    <view></view>
  </view>
  <!--右下-->
  <view id="li" class='{{amplification_index===5?"indexli":""}}'>
    五等奖
    <view></view>
  </view>
  <p id="pp"></p>
</view>

wxss文件:

#container {
  width: 750rpx;
  height: 750rpx;
}
 
#li, a {
  background: #fff;
  margin: 20rpx;
  border: 1px solid #000000;
  width: 210rpx;
  height: 210rpx;
  box-sizing: border-box;
  display: block;
  float: left;
  text-align: center;
  line-height: 100px;
  position: relative;
  border-radius: 5rpx;
}
 
a:hover {
  cursor: pointer;
  color: orange;
  font-size: 18px;
}
 
.active {
  background: red;
  color: #fff;
}
 
#pp {
  line-height: 32px;
  color: #9a9a9a;
  text-align: center;
}
 
page view .indexli {
  width: 210rpx;
  height: 210rpx;
  margin-top: 0rpx;
  margin-left: 0rpx;
  margin-bottom: 0rpx;
  margin-right: 0rpx;
  box-sizing: border-box;
}
 
.indexli view {
  position: absolute;
  width: 190rpx;
  height: 190rpx;
  background: #000000;
  opacity: 0.3;
  left: 0;
  top: 0;
  border:10rpx solid blue;
}
 
a {
  position: relative;
}
 
a image {
  width: 100%;
  height: 100%;
  border-radius: 5rpx;
}
 
a view {
  width: 80rpx;
  height: 80rpx;
  position: absolute;
  font-size: 40rpx;
  color: #fff;
  font-weight: 700;
  line-height: 40rpx;
  margin-left: -40rpx;
  margin-top: -40rpx;
  left: 50%;
  top: 50%;
 
}
 
.c_title {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 20rpx;
  padding-top: 30rpx;
}
 
.c_title2 {
  color: #fff;
  text-align: center;
  font-size: 40rpx;
}
 
.c_title3 {
  background: red;
  width: 250rpx;
  margin-left: 250rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #fff;
  font-size: 20rpx;
  text-align: center;
}
 
.c_titlr4 {
  background: gold;
  color: red;
  width: 400rpx;
  border-radius: 500rpx;
  text-align: center;
  font-size: 20rpx;
  margin-left: 175rpx;
  margin-top: 10rpx;
}
 
.b1 {
  margin-left: 20rpx;

js文件

// pages/Lottery/Lottery.js
Page({
  data: {
    last_index: 0,//上一回滚动的位置
    amplification_index: 0,//轮盘的当前滚动位置
    roll_flag: true,//是否允许滚动
    max_number: 8,//轮盘的全部数量
    speed: 300,//速度,速度值越大,则越慢 初始化为300
    finalindex: 5,//最终的奖励距离当前的位置!不是最后的几等奖!
    myInterval: "",//定时器
    max_speed: 40,//滚盘的最大速度
    minturns: 8,//最小的圈数为2
    runs_now: 0//当前已跑步数
  },
  //开始滚动
  startrolling: function () {
    let _this = this;
    //初始化步数
    _this.data.runs_now = 0;
    //当前可以点击的状态下
    if (_this.data.roll_flag) {
      _this.data.roll_flag = false;
      //启动滚盘,注,若是最终后台无返回就不好意思里
      _this.rolling();
    }
  },
  onShow: function () {
    this.data.min_height = getApp().globalData.windowheight;
    this.setData(this.data);
  },
  //滚动轮盘的动画效果
  rolling: function (amplification_index) {
    var _this = this;
    this.data.myInterval = setTimeout(function () { _this.rolling(); }, this.data.speed);
    this.data.runs_now++;//已经跑步数加一
    this.data.amplification_index++;//当前的加一
    //获取总步数,接口延迟问题,所以最后还是设置成1s以上
    var count_num = this.data.minturns * this.data.max_number + this.data.finalindex - this.data.last_index;
    //上升期间
    if (this.data.runs_now <= (count_num / 3) * 2) {
      this.data.speed -= 30;//加速
      if (this.data.speed <= this.data.max_speed) {
        this.data.speed = this.data.max_speed;//最高速度为40;
      }
    }
    //抽奖结束
    else if (this.data.runs_now >= count_num) {
      clearInterval(this.data.myInterval);
      this.data.roll_flag = true;
    }
    //下降期间
    else if (count_num - this.data.runs_now <= 10) {
      this.data.speed += 20;
    }
    //缓冲区间
    else {
      this.data.speed += 10;
      if (this.data.speed >= 100) {
        this.data.speed = 100;//最低速度为100;
      }
    }
    if (this.data.amplification_index > this.data.max_number) {//判定!是否大于最大数
      this.data.amplification_index = 1;
    }
    this.setData(this.data);
 
  }
})

样式

color: #fff; font-size: 40rpx;}
.b2 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}
.b3 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}
.b4 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}
.b5 { margin-left: 20rpx; color: #fff; font-size: 25rpx;}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序实现多宫格抽奖活动

    最近闲来无事,做了一个多宫格抽奖的例子,有什么需要改进或者错误的地方,请留言,谢谢 首先看效果: 思路是先让其转动2圈多,然后再进行抽奖,格子运动用的是setTimeout,让其运行的时间间隔不一样,然后产生运动快慢的效果 好了,上代码 首先是WXML(这里面的判断可能有些绕,仔细按顺序看,因其第五个和第十一个格子在不同手机屏幕大小上的显示有问题,所以再次给它们判断了一下) <view class="box"> <view class="boxsub {{l

  • 微信小程序实现走马灯式抽奖

    本文实例为大家分享了微信小程序实现走马灯式抽奖的具体代码,供大家参考,具体内容如下 先来看下效果 设置奖项 awardList是从后台拿到的奖项数组,list不够八位时填充谢谢参与奖项,超过八位时截取数组,然后随机打乱数组,保证奖项随机布局,第四位固定填充立即抽奖按钮 // 设置奖项   settingAward(awardList) {     const len = awardList.length;     const award = {       awardName: '谢谢参与',

  • 微信小程序开发之大转盘 仿天猫超市抽奖实例

    天猫超市翻牌的转盘经常用,以前做Android,没啥想法,现在尝试微信小程序,看到别人家APP里有啥好玩的,就想去做一个. 上GIF看效果: 简要的说一下. 1.外面一圈闪烁的小球是用js控制的样式.500ms改变一次样式.简单粗暴; 2.抽奖的item也是js控制背景,但是怎么样让它优雅的停下来是个问题.动画中有timingFunction可以设置速度.自己用js就没那么简单了.我这里用setInterval(),时间是线性变化的.换个斜率先小后大的函数效果应该会好一些. 注释写了一些,凑合这

  • 微信小程序实现九宫格抽奖

    本文实例为大家分享了微信小程序实现九宫格抽奖的具体代码,适用于年会抽奖,供大家参考,具体内容如下 效果图比较卡顿,真实运行效果是旋转的 用到的素材: 实现步骤: 实现原理 改变每一项的透明度实现选中效果.利用setTimeOut时间使旋转速度越来越慢.达到慢慢停止的效果.实际应用中可以将9张奖品图片和中奖项均通过接口返回.以方便奖品的调整. 1.布局绘制 <view class="container"> 停止位置:<input value='{{luckPositio

  • 微信小程序转盘抽奖的实现方法

    本文实例为大家分享了微信小程序实现转盘抽奖的具体代码,供大家参考,具体内容如下 lucky-draw.wxss: .lucky_draw_zp{ width: 502rpx; height: 502rpx; margin: 0 auto; position: relative;} .lucky_draw_zp_img , .lucky_draw_zp_btn{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;} luc

  • 微信小程序 扭蛋抽奖机css3动画实现详解

    前言 最近快速上线一个抽奖活动,又不想用canvas做,思考了很久,还是决定使用css3的动画来做,只要小球动得快,就没人发现我这些个小球的运动路径都是一样的了.先上动图 wxml文件: <view class="ball-box"> <image class="ball ball_1 {{start?'weiyi_1':''}}" src="https://acceleratepic.miniso.com/miniso/ball1.pn

  • 微信小程序抽奖组件的使用步骤

    采用微信组件的方式提供,因组件内部使用了async/await,所以请在微信开发者工具"详情=>本地设置 勾上 增强编译和使用npm",小程序npm使用方法请参考:微信小程序-npm支持 先看效果图: 使用步骤: 步骤一: 安装依赖或前往githua下载源码,拷贝dist目录下的lottery-turntable目录 npm i lottery-turntable-for-wx-miniprogram 步骤二: 页面JSON配置 { "usingComponents&q

  • 微信小程序实现翻牌抽奖动画

    本文实例为大家分享了微信小程序实现翻牌抽奖的具体代码,供大家参考,具体内容如下 效果图如下所示 这里做的比较简陋,就花了一点时间实现了翻牌抽奖效果,提供思路 .wxml <view class="button" bindtap="again">重新翻牌</view> <view class="curin-index"> <view bindtap="{{whether?'':'tamin'}}&

  • 微信小程序 摇一摇抽奖简单实例实现代码

    微信小程序 摇一摇抽奖 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目录. 首先看下根目录下的app.json的文件,可以看到在"pages"的数组里,里面配置了每个界面,且包含了每个界面文件的目录 我们接下来看一下page文件夹,可以看到每个页面需要包含两个文件,一个是js文件,是每个界面的入口,wxml的文件是每个界面的布局文件,wxss是样式文件. 接下来看一下logs文件夹,在logs文件夹中比index文件夹中多出了一个logs.json的文件,l

  • 微信小程序实现转盘抽奖

    本文实例为大家分享了微信小程序实现转盘抽奖的具体代码,供大家参考,具体内容如下 效果图如下所示 .wxml <view class="index"> <view class="xian"></view> <view class="xian"></view> <view class="xian"></view> <view class=&q

随机推荐