vue中调用scrollIntoView()无效

问题

有一个场景，父组件监听子组件加载完成后，通过 $emit 通知父组件，然后父调用 this.$refs.detail.scrollIntoView() ，但是很遗憾，页面没有实现滚动效果。附上代码。

组件代码

<button @click="goToDetail">切换</button>
<el-tab-pane label="文章详情" name="ArticleDetail" v-loading="loading">
  <article-detail :formData="data" ref="articleDetail" @done="$emit('done')"> </article-detail>
</el-tab-pane>

父组件通过 ref 调用 ArticleDetail 的 scrollIntoView() 方法。

{
  methods: {
    goToDetail() {
      this.activeTab = 'ArticleDetail'
      this.$refs.articleDetail.showCurrent(index);
    }
  }
}

ArticleDetail 组件的 showCurrent() 方法定义如下：

methods: {
  showCurrent(index) {
    const el = document.getElementById('detail-' + index);
    if (el) {
      el.scrollIntoView();
    }
  }
}

原因

由于 this.activeTab = ArticleDetail 切换 tab 后，因为是异步渲染的，这时候页面还没完全渲染完成就调用 this.$refs.articleDetail.showCurrent(index)，获取的 document.getElementById('detail-' + index) 为 null，导致 scrollIntoView() 方法无效。

解决

解决方法很简单，vue 提供了 this.$nextTick() 方法，可以在页面渲染完成后，获取到渲染后到DOM元素，所以只需要在 this.$nextTick() 的回调函数中调用 this.$refs.articleDetail.showCurrent(index); 即可。

{
  methods: {
    goToDetail() {
      this.activeTab = 'ArticleDetail'
      this.$nextTick(() => {
        this.$refs.articleDetail.showCurrent(index);
      });
    }
  }
}

如果您有什么看法或意见，欢迎通过右边的反馈悬浮框反馈

本文为原创，未经同意授权，禁止任何媒体或个人自媒体以及任何声明式转载

商业侵权必究，如需授权请联系340443366@qq.com

原文链接：https://www.1024nav.com/faq/vue-scrollintoview

恭喜你看完本篇文章，奖励你一个大红包🧧🧧，支付宝扫下方二维码即可领取

问题​

原因​

解决​

恭喜你看完本篇文章，奖励你一个大红包🧧🧧，支付宝扫下方二维码即可领取

京东，淘宝薅羊毛微信群，欢迎您的加入

问题

原因

解决