vue 九宫格抽奖--源码

最新推荐文章于 2024-07-22 16:00:30 发布

Mian DF

最新推荐文章于 2024-07-22 16:00:30 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_31889029/article/details/100887548

版权

本文介绍如何使用Vue.js创建一个动态的九宫格抽奖界面，包括旋转动画和中奖逻辑。通过组件化和CSS3动画技术，实现平滑的转动效果，同时讲解关键代码和实现思路。

摘要由CSDN通过智能技术生成

仅供参考

 <template>
      <div class="gameBox">
        <div class="bg1"></div>
        <div class="bg2" v-show="lampShow"></div>
        <div class="start" @click="move">
          <p>（{
  {number_of_draws}}次）</p>
        </div>
        <ul>
          <li v-for="(item,i) in list" :key="i" :class="['item' + (i+1), {'active': index == i}]">
            <div class="img1">
              <img :src="item.image" alt />
            </div>
            <p>{
  {item.prize_name}}</p>
          </li>
        </ul>
      </div>
    </template>
    
    <script type="text/javascript">
    export default {
      data() {
        return {
          list: [], //奖品列表
          index: 0, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
          count: 8, // 总共有多少个位置
          times: 0, // 转动跑格子次数,
          cycle: 60, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
          speed: 200, // 初始转动速度
          lampShow: false, //开始抽奖，灯光闪烁
          timer: 0, // 转动定时器
          lamp: 0, // 灯光定时器
          prize: 0, // 中奖位置，接口返回
          number_of_draws: 0, //限制每天抽奖次数，接口返回
          prize_data: {
            //中奖信息
            id: Number, //奖品ID
            name: "", //奖品名称
            number: Number, //奖品数量
            image: "", //奖品图