uniapp实现数字滚动特效

最新推荐文章于 2024-07-25 11:43:11 发布

nrnser

最新推荐文章于 2024-07-25 11:43:11 发布

阅读量2.4k

点赞数 3

文章标签： css html5 html js javascript

本文链接：https://blog.csdn.net/nrnser/article/details/120510011

版权

本文介绍了一种前端开发中利用 Vue.js 实现的数字滚动效果，通过拆分显示每个数字并结合滚动，展示了如何创建动态且易于理解的数字布局。作者还提供了设置和修改数字的方法，以及使用了随机数生成和样式控制。

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

<template>
	<view style="box-sizing: border-box;">
		<view class="hideWrap" :style="hideWrapWidth">
			<view class="numWrap" :style="item1.position" v-for="(item1,index) in newNum" :key="index">
				<view v-for="(item,index) in defaultNum" :style="item1.isDecimal?'font-size: 38rpx;':''"
					class="numItemWrap">
					{{item}}
				</view>
			</view>
		</view>
		<view @click="changeNum()">
			添加
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				numWrapWidth: 30,
				hideWrapWidth: 'width:210rpx;',
				num: '21328.13',
				newNum: [{
					num: '0',
					position: 'left:0rpx;top:-0%;'
				}, {
					num: '0',
					position: 'left:30rpx;top:-0%;'
				}, {
					num: '0',
					position: 'left:60rpx;top:-0%;'
				}, {
					num: '0',
					position: 'left:90rpx;top:-0%;'
				}, {
					num: '0',
					position: 'left:120rpx;top:-0%;'
				}, {
					num: '0',
					position: 'left:150rpx;top:-0%;'
				}, {
					num: '0',
					position: 'left:180rpx;top:-0%;'
				}],
				defaultNum: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'] //有几位数就遍历多少次defaultNum
			}
		},
		onLoad() {
			this.setNum(this.num)
		},
		methods: {
			setNum(num) {
				let _this = this;
				let newNum = [];
				let thisNum = (num + '').split('');
				let leftPx = 0;
				let isDecimal = false;
				for (let i = 0; i < thisNum.length; i++) {
					if (thisNum[i] === '.') {
						isDecimal = true
					};
					let data = {};
					let topLength = (10 - thisNum[i]);
					let left = `left:${leftPx}rpx;`;
					let top = `top:-${thisNum[i] === '.'?'1000':(10-topLength)*100}%;`;
					data.num = thisNum[i]
					data.position = left + top
					if (isDecimal) {
						data.isDecimal = true;
					}
					newNum.push(data);
					leftPx = leftPx + this.numWrapWidth
				};
				this.hideWrapWidth = `width:${leftPx}rpx;`
				setTimeout(() => {
					this.newNum = newNum;
				}, 10);
			},
			changeNum() {
				this.num = this.random(1000, 100000)
				this.setNum(this.num.toFixed(2))
			},
			random(min, max) {
				return Math.random() * (max - min) + min;

			}
		},

	}
</script>

<style scoped>
	.hideWrap {
		position: relative;
		height: 80rpx;
		overflow: hidden;
		/* border: 1px solid; */
		margin: 200rpx auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.numWrap {
		position: absolute;
		top: 0;
		transition: all 0.5s;
		-moz-transition: all 0.5s;
		/* Firefox 4 */
		-webkit-transition: all 0.5s;
		/* Safari 和 Chrome */
		-o-transition: all 0.5s;
		/* Opera */
	}

	.numItemWrap {
		text-align: center;
		width: 30rpx;
		line-height: 80rpx;
		font-size: 44rpx;
		height: 80rpx;
		font-weight: 500;
		color: #4CD964;
	}
</style>

思路：把每个数字拆分开显示再加上滚动效果