效果如图所示:
vuejs nuxtjs实现数据滚动效果
下载countup.js vue-countup-v2两个插件
npm install --save countup.js vue-countup-v2
在需要使用的页面引入使用
<template>
<div style="padding-top:146rem;">
<Headers/>
<div style="background-color: #fff;">
<div class="MainBox contents">
<div class="us-left">
<div class="us-left-content">
<div class="us-left-null"></div>
<div class="us-left-school">学校介绍</div>
<div class="us-left-e">ABOUT US</div>
</div>
</div>
<div class="us-right">
<div class="content">
<div class="tilte">江西省建设职业培训学校</div>
<div class="desc"></div>
<div class="content">
江西省建设职业培训学校创建于2011年,是经江西省人力资源和社会保障厅、江西省民政厅批准成立的具有独立法人资格的民办学校,现有青山湖和新建两个校区。 青山湖校区位于南昌师范学院老校区内(原江西教育学院),租赁两栋楼建筑面积共2356平方;新建校区,即新蓝领培训基地,占地面积约26亩,建筑面积15000多平方,投资5000多万元,可容纳近2000名学员同时学习。学校经过多年建设,各类教学设施设备配套完善,拥有各类多媒体培训教室、多功能培训会议厅、机房和各类实训教室和实操设备等,配备完善的考试监控、屏蔽、网络系统,可全方位满足多媒体理论教学和实操培训和考试(考核、认定)等需求;同时,学校有宿舍,食堂,运动球场,停车位等,能满足学员学习,生活,休闲运动等需求。 我校专注于各职业类技能培训。培训范围有电工、手工木工、起重装卸机械操作
</div>
<div class="storeContainer">
<div class="left">
<div class="line"></div>
<div class="number">
<span style="font-weight: bold;">
<ICountUp :start="0" :endVal="300" :delay="delay"/>
</span>+
</div>
<div class="desc">6+年的历史沉淀</div>
</div>
<div class="left">
<div class="line"></div>
<div class="number">
<span style="font-weight: bold;">
<ICountUp :start="0" :endVal="1000" :delay="delay"/>
</span>+
</div>
<div class="desc">10+年丰富教学经验</div>
</div>
<div class="right">
<div class="line"></div>
<div class="number">
<span style="font-weight: bold;">
<ICountUp :start="0" :endVal="2000" :delay="delay"/>
</span>+
</div>
<div class="desc">200+专职教研技术专家</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ICountUp from 'vue-countup-v2';
export default{
components:{
ICountUp
},
data(){
return{
delay: 10,
}
},
}
</script>