vue数字滚动效果组件

数字滚动变化效果组件

效果

预览

体验地址

用途

• 大屏展示，数字滚动效果

实现

使用js控制元素移动。 关键代码如下：

//修改
chang(oldVal,newVal,id){
	if(oldVal >= newVal) return;
	let stepTime = this.stepTime;
	let time = Math.ceil((newVal - oldVal) / this.fontSize);
	time = stepTime / time;
	const dom = document.getElementById(id);
	// console.log(oldVal,newVal,id,dom);
	// console.log('time',time);
	oldVal += 0.5;
	if(oldVal >= 20){
		oldVal %= 20;
		newVal %= 20;
	}
	if(oldVal >= 10){
		oldVal %= 10;
		newVal %= 10;
		if(newVal < oldVal) newVal += 10;
	}
	dom.style.bottom = oldVal * this.fontSize + 'rem';
	setTimeout(()=>{
		this.chang(oldVal,newVal,id);
	},time);
},
//数据变化时触发，处理变化后的数据
numRolling(newVal,oldVal){
	this.oldVal = newVal;
	oldVal = parseFloat(oldVal).toFixed(this.fixNum).toString().split('');
	newVal = parseFloat(newVal).toFixed(this.fixNum).toString().split('');
	let headNum = this.headNum;
	//数位发生变化，前面补零
	while(oldVal.length < newVal.length){
		oldVal.unshift('0');
		headNum--;
		document.getElementById('num-content'+headNum).parentNode.style.display = 'flex';
	}
	//修改前置位标记数
	this.headNum = headNum;
	for(let i = 0; i < newVal.length; i++){
		let num = parseInt(newVal[i]);
		if(num >= 0 && num <= 9 ){
			let oldV = parseFloat(oldVal[i]),newV = parseFloat(newVal[i]);
			if(oldV > newV) newV += 10;
			this.chang(oldV,newV,'num-content'+(i + headNum));
		}
	}
}

npm引入

组件以上传到npm，可以直接install使用

1.安装

npm i @jyeontu/jvuewheel -S

2.引入

//引入组件库
import jvuewheel from '@jyeontu/jvuewheel'
//引入样式
import '@jyeontu/jvuewheel/lib/jvuewhell.css'
Vue.use(jvuewheel);

3.vue中引用组件

<j-num-rolling :nums = "nums" 
			:fixNum = "2" 
			:stepTime = "200" 
			:refreshTime = "2" 
			:fontSize = "4" 
			:numStyle = "numStyle">
</j-num-rolling>

资源地址

组件文档

文档地址：http://120.79.163.94/JYeontuComponents/#/homePage

代码地址

Gitee：gitee.com/zheng_yongt…