简易滚动数字

一、前言

没什么好说的

二、代码

<template>
  <div class="flex">
    <div class="w-36px h-36px overflow-hidden border border-gray-600 mx-3px" v-for="(item1,index1) in basevalue"
         :key="index1 + 'base'">
      <div class="w-36px h-36px leading-36px text-center text-xl select-none" :class="[classlist[index1]]"
           :style="{transform:`translateY(-${item1*36}px)`}" v-for="item2 in shuzi" :key="item2+'a'">{{ item2 }}
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, defineEmits, defineProps, nextTick, watch, computed} from "vue"
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";

const router = useRouter()
const route = useRoute()
const store = useStore()
const basevalue = ref(["0", "0", "0", "0", "0", "0"])
const shuzi = ref(["0", "1", "2", "3", "4", "5", "6", "7", "8", "9",])
const classlist = ref([])
const xunhuan1 = ref(null)
const xunhuan2 = ref(null)
const props = defineProps({
  num: {
    type: Number || String,
    default: 0 || "0",
  },
})
watch(() => props.num, () => {
  console.log("触发方法")
  basevalue.value = props.num.toString().split("")
  bianbianbian()
  console.log(classlist.value, "有没有啊")
})
const bianbianbian = () => {
  clearTimeout(xunhuan1.value)
  clearTimeout(xunhuan2.value)
  classlist.value = []
  basevalue.value.forEach((item, index) => {
    classlist.value[index] = "gundong"
  })
  xunhuan1.value = setTimeout(() => {
    tingzhi()
  }, 2000)
}
const tingzhi = () => {
  for (let i = 0; i < basevalue.value.length; i++) {
    if (classlist.value[i] === "gundong") {
      classlist.value[i] = ""
      break;
    }
  }
  if(classlist.value.includes("gundong")){
    xunhuan2.value = setTimeout(() => {
      tingzhi()
    }, 1000)
  }
}
</script>
<script>
import {defineComponent} from "vue"

export default defineComponent({
  name: "",
})
</script>

<style scoped>
.gundong {
  animation: gundonganimation 0.8s infinite linear;
}

@keyframes gundonganimation {
  0% {
    transform: translateY(18px);
  }
  50% {
    transform: translateY(-180px)
  }
  100% {
    transform: translateY(-360px)
  }
}
</style>