vue 实现数字滚动卡片

最新推荐文章于 2025-06-10 15:37:44 发布

Now_li

最新推荐文章于 2025-06-10 15:37:44 发布

阅读量1.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： uni-app vue

本文链接：https://blog.csdn.net/Now_li/article/details/121517220

工作场景需求一个数字滚动的卡片展示，具体实现功能：
html页面代码：
因为场景是五位数字的场景，但是data定义number不能00000又懒的string去转number，所以定义了六位数然后投了个巧v-show直接去除第一位数。
:style="{transform: translateY(-${item*39}px)}" 是滚动的关键，其中39px是自定义的view高度

<view class="num_view" v-for="(item, index) in this.realTime" :key="index" v-show="index>0">
	<view class="real-time-num-item" :style="{transform: `translateY(-${item*39}px)`}">
		<view>0</view>
		<view>1</view>
		<view>2</view>
		<view>3</view>
		<view>4</view>
		<view>5</view>
		<view>6</view>
		<view>7</view>
		<view>8</view>
		<view>9</view>
	</view>
</view>

js处理：

data() {
	return {
		realTimeNum: 100500, 
	}
},
// 计算属性
computed: {
	realTime() {
		return `${this.realTimeNum}`.split('') || 0
	}
},
// 因为是使用uniapp写的  所以生命周期是onLoad
onLoad() {
	const that = this
	that.getData()
},
methods: {
	getData() {
		const that = this
		if(that.realTimeNum >= 150000){
			return
		}
		setInterval(function() {
			that.realTimeNum++
		}, 500);
	},
}

css样式：

.num_view{
	display: inline-block;
	width: 32px;
	height: 39px;
	/* background: linear-gradient(0deg, rgba(36, 97, 147, 1), rgba(115, 157, 191, 1)); */
	border: 2rpx solid #F2F2F2;
	font-size: 2em;
	font-weight: bold;
	margin-left: 3px;
	line-height: 39px;
	text-align: center;
	overflow: hidden;
}
.real-time-num>view {
	width: 32px;
	height: 39px;
}
.real-time-num-item {
	transition: all 1s ease-out;
}