Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to realize the digital dynamic flip card in vue". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "vue how to achieve digital dynamic flip" bar!

Digital dynamic flip

Recently, a digital flip was used in the project, so I wrote a dynamic flip.

The first step is to create a component page, NumberCount.vue

Idea: just show a few digits, and then scroll from 0 to the position of the current value, with a number of 0-9 in each position, and then scroll up the number of times the current number to the current number, not to mention the code.

0123456789 {{item}} export default {props: {/ / displayed digits number: {type: Number,}, / / displayed length length: {type: Number,},}, data () {return {orderNum: ['0,0,0,0,0,0,0,0,0,0,0,0 '0percent,' 0'], / / default total} }, mounted () {setTimeout (() = > {this.toOrderNum (this.number); / / enter a number here to call}, 500);}, watch: {number: {handler (val) {this.toOrderNum (val) }, deep: true,},}, methods: {/ / set text scrolling setNumberTransform () {const numberItems = this.$refs.numberItem; / / get the number of ref, calculate the number of elements / / eslint-disable-next-line no-restricted-globals const numberArr = this.orderNum.filter (item = >! isNaN (item)); console.log (numberItems.length, numberArr) / / scrolling numeric characters with CSS to display the number of 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(); }, },};/*总量滚动数字设置*/.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;}} / * scroll number setting * / .number-item {width: 28px; height: 34px; / * background image * / 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;}

No comma:

Add a comma:

The background of the style can be customized.

At this point, I believe you have a deeper understanding of "vue how to achieve digital dynamic flip". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.