更新记录

1.0.0（2026-06-22） 下载此版本

• 首次发布高性能盲盒抽奖跑马灯组件。
• 核心采用 uni.createAnimation 动效引擎，完美规避小程序双线程通信卡顿，实现全端 60 帧满帧运行。
• 支持纯 CSS 硬件加速的无限平滑滚动与物理缓动刹车。
• 支持手势触摸拖拽、单格吸附回弹等高级交互逻辑。
• 内置带发光与毛玻璃动效的高颜值中奖展示弹窗。

平台兼容性

uni-app(3.7.12)

高性能盲盒抽奖组件 (BlindBoxRunner)

一款专为 uni-app 打造的高性能盲盒抽奖跑马灯组件。经过多端深度优化，采用 uni 原生动效引擎 (uni.createAnimation)，彻底解决微信小程序等环境下的双线程通信卡顿问题。

🌟 核心特性

• 极致丝滑：底层完全由原生 GPU 接管渲染，抛弃高频 setData，无论低端机还是小程序都能满帧运行。
• 手势交互：支持用户手指左右拖拽滑动，自带物理阻尼感与单格吸附回弹效果。
• 无缝循环：平时处于匀速闲置滚动状态，首尾衔接零延迟、无白屏。
• 物理刹车：抽奖时利用高级贝塞尔曲线，实现“极速狂奔 -> 平滑减速 -> 稳稳居中刹车”的真实物理反馈。
• 开箱即用：内置了带有毛玻璃背景、发光旋转光效的高颜值中奖弹窗。

📦 快速上手

1. 引入组件

将组件下载后，放入你的 components 目录下。

2. 基础使用示例

<template>
  <view class="page-container">
    <view class="prize-pool-box">
      <BlindBoxRunner 
        ref="prizeRunner" 
        :prizeList="prizeList" 
        :drawSpeed="5" 
        @finish="onDrawFinish"
      />
    </view>

    <button class="draw-btn" @click="startLottery">开盲盒 ¥10</button>
  </view>
</template>

<script>
import BlindBoxRunner from '@/components/BlindBoxRunner.vue'

export default {
  components: { BlindBoxRunner },
  data() {
    return {
      prizeList: [
        { image: '/static/prize1.png', title: '限定手办', money: '199' },
        { image: '/static/prize2.png', title: '优惠券', money: '10' },
        { image: '/static/prize3.png', title: '抱枕', money: '59' },
        { image: '/static/prize4.png', title: '隐藏款盲盒', money: '999' }
      ]
    }
  },
  methods: {
    startLottery() {
      // 模拟向后端请求抽奖结果
      uni.showLoading()
      setTimeout(() => {
        uni.hideLoading()
        // 假设后端返回中奖索引为 3 (隐藏款盲盒)
        const winnerIndex = 3; 

        // 调用组件的 startDraw 方法开始抽奖动画
        this.$refs.prizeRunner.startDraw(winnerIndex)
      }, 500)
    },
    onDrawFinish() {
      console.log('用户已看完中奖弹窗，抽奖流程彻底结束')
    }
  }
}
</script>

<style>
.prize-pool-box {
  position: relative;
  /* 务必通过绝对定位和 left/right/margin 居中，不要在父级使用 transform，以免影响 fixed 弹窗 */
  width: 90%;
  height: 350rpx;
  margin: 100rpx auto;
}
</style>

⚙️ API 文档

Props 属性

Methods 组件方法 (通过 ref 调用)

Events 组件事件

⚠️ 注意事项

1. 父级样式陷阱：组件外部的父级容器请尽量使用 margin: 0 auto; left: 0; right: 0; position: absolute; 来实现水平居中。千万不要在父级使用 transform: translateX(-50%)，否则会导致组件内部的 fixed 弹窗降级为绝对定位而被父级裁切。
2. 图片资源：传入的图片 URL 请确保在各端均可正常加载，推荐使用网络绝对路径，以防出现跨端路径解析问题。