vue如何实现底下新增按钮增加一个列表之后页面会跟着滚动到底下?

页面中有多个列表,最下面试新增按钮,我新增一个列表之后,相当于DOM中的元素多了一行,但是页面滚动条还是停留在我点击新增时候的位置,我用如下方法实现之后,但是点击十几次之后就还是成为了之前我说的样子。

clipboard.png

回答:

在add方法的最后,添加一个nextTick:

add() {
    this.list.push(item); // 新增一个列表
    this.$nextTick(() => {
        window.scroll(0, document.body.scrollHeight); // 滚动到页面底部
    })
}

参考: Vue-nextTick的使用

回答:

button增加一个ref=”button”
点击之后通过ref获取button的位置,然后window.scrollTo

回答:

可以使用scrollIntoView()

add() {
  this.$nextTick(() => {
    let content = this.$el.querySelector('.mydiv')
    content.scrollIntoView(false)
  })
 }

Element​.scroll​Into​View()

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注