源码搜藏网

数字动态翻牌器

最近项目里使用到了数字翻牌器，于是自己写了一个，动态的翻牌器

第一步创建一个组件页面，NumberCount.vue

思路：大概就是显示几位数，然后从0开始滚动到当前的数值的位置，在每一个位置都有0-9的数，然后就是往上滚动当前数值的次数到当前的数，话不多说上代码

<template>
 <div class="chartNum">
  <div class="box-item">
   <li
    :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
    v-for="(item, index) in orderNum"
    :key="index"
   >
    <span v-if="!isNaN(item)">
     <i ref="numberItem">0123456789</i>
    </span>
    <span class="comma" v-else>{{ item }}</span>
   </li>
  </div>
 </div>
</template>
<script>
export default {
 props: {
  // 显示的数字
  number: {
   type: Number,
  },
  // 显示的长度
  length: {
   type: Number,
  },
 },
 data() {
  return {
   orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认总数
  };
 },
 mounted() {
  setTimeout(() => {
   this.toOrderNum(this.number); // 这里输入数字即可调用
  }, 500);
 },
 watch: {
  number: {
   handler(val) {
    this.toOrderNum(val);
   },
   deep: true,
  },
 },
 methods: {
  // 设置文字滚动
  setNumberTransform() {
   const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
   // eslint-disable-next-line no-restricted-globals
   const numberArr = this.orderNum.filter(item => !isNaN(item));
   console.log(numberItems.length, numberArr);
   // 结合CSS 对数字字符进行滚动,显示数量
   for (let index = 0; index < numberItems.length; index += 1) {
    const elem = numberItems[index];
    elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
   }
  },
  // 处理总数字
  toOrderNum(num) {
   const numtext = num.toString();
   if (this.length) {
    if (numtext.length < this.length) {
     const numlist = `0${numtext}`; // 如未满固定数，添加"0"补位
     this.toOrderNum(numlist); // 递归添加"0"补位
    } else if (numtext.length === num.length) {
     this.orderNum = numtext.split(''); // 将其便变成数据，渲染至滚动数组
    }
   } else {
    this.orderNum = numtext.split('');
   }
   // 数字中加入逗号
   // const length = numtext.length / 3;
   // let count = '';
   // for (let i = 0; i < length; i += 1) {
   //  if (i === 0) {
   //   count += `${numtext.slice(i, i + 3)},`;
   //   console.log(count);
   //  } else if (i === length - 1) {
   //   count += numtext.slice(i * 3, i * 3 + 3);
   //   console.log(count);
   //  } else {
   //   count += `${numtext.slice(i * 3, i * 3 + 3)},`;
   //   console.log(count);
   //  }
   // }
   // this.orderNum = count.split('');
   this.setNumberTransform();
  },
 },
};
</script>
<style scoped lang="scss">
/*总量滚动数字设置*/
.box-item {
 position: relative;
 height: 34px;
 font-size: 20px;
 font-family: AzonixRegular;
 color: #021c25;
 line-height: 41px;
 text-align: center;
 list-style: none;
 writing-mode: vertical-lr;
 text-orientation: upright;
}
/* 默认逗号设置 */
.mark-item {
 width: 28px;
 height: 34px;
 position: relative;
 /* 背景图片 */
 background: url('~@/assets/images/overview/bg-chartNum.svg') no-repeat center
  center;
 background-size: 100% 100%;
 list-style: none;
 margin-right: 1px;
 & > span {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 2px;
  left: 20%;
  font-size: 20px;
  writing-mode: vertical-rl;
  text-orientation: upright;
 }
}
/*滚动数字设置*/
.number-item {
 width: 28px;
 height: 34px;
 /* 背景图片 */
 background: url('~@/assets/images/overview/bg-chartNum.svg') no-repeat center
  center;
 background-size: 100% 100%;
 // background: #ccc;
 list-style: none;
 margin-right: 1px;
 & > span {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  width: 100%;
  height: 100%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  & > i {
   font-style: normal;
   position: absolute;
   top: 8px;
   left: 50%;
   transform: translate(-50%, 0);
   transition: transform 1s ease-in-out;
   letter-spacing: 10px;
  }
 }
}
.number-item:last-child {
 margin-right: 0;
}
</style>

不加逗号：

加入逗号：

至于样式背景可以自定义

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持源码搜藏网。