vue 数字上下滚动抽奖

最新推荐文章于 2024-06-18 11:51:53 发布

weixin_33694172

最新推荐文章于 2024-06-18 11:51:53 发布

阅读量4.8k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://juejin.im/post/5ca1961f51882543ef3dbee3

版权

本文介绍了如何使用Vue和JavaScript实现数字抽奖效果。通过操纵CSS3属性，代码创建了一个动态的抽奖滚动数字动画，适用于前端开发中的互动抽奖场景。

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

本章节分享一段代码实例，它实现了数字抽奖效果。

代码实例如下:

<div class="start_draw">
    <div class="wrap">
        <div class="numw" v-for="(item,n) in numArrList" :key="n">
            <ul :style="item">
              <li v-for="(num,index) in numArr" :key="index">{
   {num}}</li>
            </ul>
        </div>
    </div>
    <div class="draw_btn_bar" v-if="drawBtnStatus === 0" @click="drawNow()">{
   {running === 0? '点击抽奖': '停'}}</div>
</div>

<script>
data() {
    return {
        running: 0, // 0，未执行  1：执行
        numArrList: ['firstStyle','secondStyle','third