我需要在渲染后更新div的滚动。在实际代码中,div填充了异步调用的结果,有很多行和列,但我已经构建了这个codepen来查看问题。
<div id="app">
<button @click="doScroll()">Scroll</button>
<div id="content" v-for="x in xs">
<span v-for="y in ys">{{x}}{{y}} </span>
</div>
</div>
var vm = new Vue({
el: "#app",
mounted: function(){
},
data: {
xs: 0,
ys: 0
},
updated: function(){
$('#app').scrollTop(200);
},
created: function(){
var vm = this;
setTimeout(function(){
vm.xs=30;
vm.ys=30
},1000);
},
methods: {
doScroll: function(){
$('#app').scrollTop(200);
}
}
})
https://codepen.io/kNo/pen/BJKmbE?editors=1111
可以看出,scrollTop仅在按钮单击事件时更新。
如何在渲染div后自动更新scrollTop属性?
基于您的codepen,您似乎使用的是VueJs 1.0,而不是VueJS 2.0。在版本1中,安装组件后调用的生命周期钩子称为“就绪”。
有关v1和v2之间的差异,请参阅qazxsw poi。
如果您希望使用版本1,请使用以下命令:
https://vuejs.org/v2/guide/migration.html#Lifecycle-Hooks
我认为你的代码中有一个拼写错误,它不是“更新”而是“更新”
ready: function () {
$('#app').scrollTop(200);
}