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

最新推荐文章于 2025-05-12 13:57:49 发布

原创

最新推荐文章于 2025-05-12 13:57:49 发布 · 4.1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #抽奖 #九宫格抽奖 #圆形转盘

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

九宫格抽奖

思路
动态构造几次方的正方形抽键盘的4条边；
requestAnimationFrame来控制动画执行过程。
重点过程

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)
    }
  )
})()

根据传入的奖品项判断当前是几次方正方形（一个正方形有4条边有4个顶点这个是死的）

DINGDIAN:4,
BIAN:4
// 获取几次幂方阵
this.firstTurn = (this.ds.length + this.DINGDIAN) / this.BIAN

// 获取画第二条边 最多可画几个
this.secondNeedNumber = this.firstTurn - 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 <=