Question

我需要在渲染后更新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属性？

Answer 1

根据您的codepen，您似乎使用的是VueJs 1.0，而不是VueJS 2.0。在版本1中，安装组件后调用的生命周期钩子称为“就绪”。

请参阅https://vuejs.org/v2/guide/migration.html#Lifecycle-Hooks了解v1和v2之间的差异。

如果您希望使用版本1，请使用以下命令：

ready: function () {
    $('#app').scrollTop(200);
}

Answer 2

我认为你的代码中有拼写错误，它不是“更新”而是“更新”

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);
    }
  }
})

Vue js不会更新scrollTop

2 个答案: