vue纯css文字抽奖滚动，逐渐递减显示

效果

 

 

 原文地址：https://www.cnblogs.com/aknife/p/13672207.html

 

 

封装组件 numBounce.vue

<template>
  <div class="demo">
    <ul class="fp-box">
      <!-- 需要显示6列 -->
      <li ref="li"
          v-for="i in this.showArrLength"
          :key="i">
        <!-- 每列中的10行数字 -->
        <span v-for="num in 10"
              :key="num">{{ num - 1 }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'numBounce',
  props: {
    scrollNumStr: {
      type: Number,
      default: ''
    }
  },
  watch: {
    scrollNumStr (val) {
      this.number = val
    }
  },
  data () {
    return {
      numberArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], //固定每列中的19行数字
      numStr: "", // 需要展示的数字字符串
      numArr: [0, 0, 0, 0, 0, 0], //默认展示6个数字数组
      number: this.scrollNumStr,//345678
      showArr: [],//显示数据的数组
      showArrLength: 0,//数组长度
      showArrIndex: 0,//显示数据变化
    };
  },
  mounted () {
    let num = this.number
    if (num > 0) {
      let s = '' + num;
      let res = [];
      for (let i = 0; i < s.length; i++) {
        res.push(s[i]);
      }
      this.showArr = res
      this.showArrLength = this.showArr.length
    }

    this.numTime = setInterval(() => {
      let arrLength = this.showArrLength
      if (this.showArrIndex < arrLength) {
        let add9 = arrLength - (this.showArrIndex + 1)
        console.log('add9' + add9);
        let unmScroll = '';
        for (let i = 0; i <= this.showArrIndex; i++) {
          unmScroll = unmScroll + this.showArr[i]
        }
        for (let i = 0; i < add9; i++) {
          unmScroll = unmScroll + '' + (Math.random() * 10 - 1)
        }
        console.log(unmScroll);
        this.scroll(unmScroll)
        this.showArrIndex += 1
      }
      // clearTimeout(this.numTime)
    }, 2000);
  },
  methods: {
    scroll (val) {
      this.numStr = val + ''
      this.numArr = this.numStr.split("");
      let numArrlen = this.numArr.length;
      // 展示数字的处理，不够6位前面补0
      for (let i = 0; i < this.showArrLength - numArrlen; i++) {
        this.numArr.unshift(0);
      }
      this.$refs.li.forEach((item, index) => {
        let ty = this.numArr[index];
        // 滚动数字(li标签)
        item.style.transform = `translateY(-${ty * 30}px)`;
      });
    }
  }
};
</script>

<style   scoped>
* {
  margin: 0;
  padding: 0;
}
.fp-box {
  display: flex;
  overflow: hidden;
}
.fp-box li {
  width: 30px;
  height: 30px;
  flex-direction: column;
  transition: transform 1.5s ease-in-out;
}
.fp-box span {
  text-align: center;
  /* background-image: linear-gradient(90deg, #ff8464 0%, #ff6e5c 100%); */
  /* box-shadow: 0 3px 16px 0 rgba(3, 5, 21, 0.82); */
  color: black;
  font-size: 24px;
  display: flex;
  display: inline-block;
  width: 30px;
  height: 30px;
}
</style>

 

调用

<template>
  <div>
    <numBounce v-bind:scrollNumStr="val"></numBounce>
  </div>
</template>
<script>
import numBounce from '@/views/home/Home/numBounce'
export default {
  components: {
    numBounce
  },
  data () {
    return {
      val: 84836,
    }
  }
}
</script>
<style scoped>
</style>