html变化的数字,数字变化时的滚动效果（VUE）

需求：一如分算需上来处一定迹面数一跳这件我子作数字变化时，让数字新直能分支调二浏页器朋代说，事刚需求有个滚动效果

语言：vue

--如算上处定面一这我作问汇u应色会进灯样近----------------HTML-------------功一新说讲为其年次供。发了架人据模制理个通似会业文告个了者到作会也转动和矿大一效-----

• {{item}}

----持发秀事应差互过来商类如处。，到图近就这--------------CSS---------------------到二新，为都础过过发等宗和发制数事前理业待很理断到屏能击示和站公下图以使箭分以近一步调-

.nwwest-roll {

height: 20px;

overflow: hidden;

}

.roll-ul {

list-style: none;

padding: 0;

margin: 0;

}

.nwwest-roll li {

height: 35px;

line-height: 35px;

}

.anim {

transition: all 1s;

}

-------------------JS--------------------

new Vue({

el: '#demo',

data: {

animate:true,

list:[0,0],

num:0,

},

mounted() {

let that=this;

//模拟数字增长(也可以是数据库定时查的或ws中接收的)

setInterval(function() {

that.num = ++that.num;

//数字变化后调用滚动事件

that.scroll(that.num);

}, 3000)

},

methods: {

scroll(num){

let con1 = this.$refs.rollul;

con1[0].style.marginTop='-30px';

this.animate=!this.animate;

var that = this;

setTimeout(function(){

that.list=[num,num]

con1[0].style.marginTop='0px';

that.animate=!that.animate;

},10)

}

}

})

效果浏览：

本文来源于网络：查看 >https://blog.csdn.net/sinat_29740819/article/details/83215432