基于vue的h5抽奖活动九宫格转盘及圆形转盘

最近项目中遇到了需要做个h5的抽奖活动需求:要求支持九宫格模式和圆形抽奖盘模式。这边基于vue和vantUI的loading组件造了这2个轮子。

九宫格抽奖
  • 思路
    动态构造几次方的正方形抽键盘的4条边;
    requestAnimationFrame来控制动画执行过程。

  • 重点过程

  1. requestAnimationFrame初始化兼容性
// 兼容性raf初始化
window.requestAniFrame = (function() {
   
   
  return window.requestAnimationFrame

  // Older versions Chrome/Webkit
  window.webkitRequestAnimationFrame ||
    // Firefox < 23
    window.mozRequestAnimationFrame ||
    // opera
    window.oRequestAnimationFrame ||
    // ie
    window.msRequestAnimationFrame ||
    function(callback) {
   
   
      return window.setTimeout(callback, 1000 / 60)
    }
})()

// 兼容性取消初始化
window.cancelAnimation = (function() {
   
   
  return (
    window.cancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.cancelRequestAnimationFrame ||
    function(id) {
   
   
      clearTimeout(id)
    }
  )
})()
  1. 根据传入的奖品项判断当前是几次方正方形(一个正方形有4条边有4个顶点这个是死的)
DINGDIAN:4,
BIAN:4
// 获取几次幂方阵
this.firstTurn = (this.ds.length + this.DINGDIAN) / this.BIAN

// 获取画第二条边 最多可画几个
this.secondNeedNumber = this.firstTurn - 1
  1. v-for下动态构造4条边
// 获取位置
getPosition(index, isSelect) {
   
   
  // 选中样式
  let selectStyle = ``
  if (isSelect) {
   
   
    const selectWidth = this.tWidth - 4
    const selectHeight = this.tHeight - 4
    selectStyle = `width:${
     
     px2vw(selectWidth)};height:${
     
     px2vw(
      selectHeight
    )};border:${
     
     px2vw(2)} solid ${
     
     this.turnBackground}`
  }

  // 第一条边 index 0 1 2
  if (index < this.firstTurn) {
   
   
    let i = index - 0 * (this.firstTurn - 1)
    return `top:0;left:${
     
     px2vw(i * this.tWidth)};${
     
     
      this.commonStyle
    };${
     
     selectStyle}`
  }
  // 第二条边 index值从 3 4
  if (index - this.firstTurn < this.secondNeedNumber) {
   
   
    let i = index - 1 * (this.firstTurn - 1)
    return `top:${
     
     px2vw(i * this.tWidth)};left:${
     
     px2vw(this.abWidth)};${
     
     
      this.commonStyle
    };${
     
     selectStyle}`
  }
  // 第三条边 5 6
  if (index <= 
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值