「Vue」点击滚动页面与$nextTick问题解决

这一篇主要讲述今天使用Vue点击滚动的实现
以及Vue在页面渲染未完成时滚动偏移的问题

页面结构

添加滚动前页面的基本结构

点击标题时触发绑定样式.table-display，当前点击显示的表格为display:table;其他详情表格为display:none;
监听点击事件触发方法修改标识，控制样式的绑定。

<template>
<!-- 略 -->
<style>
.table-display {display: table;}
</style>
<ul>
<li v-for="(item,index) in detailsList">
<div class="text-wrap">
<a class="title-list" @click="showDetails(index)" ref="listshow">
{{item.title}}
</a>
</div>
<table class="table b-table table-striped" v-bind:class="{'table-display':showIndex==index}">
<!-- 略 -->
</table>
</li>
</ul>
<!-- 略 -->
</template>
<script>
export default{
data(){
return {
showIndex: null,
}
},
methods: {
showDetails: function (index) {
if (this.showIndex == index) {
this.showIndex = null
} else {
this.showIndex = index
}
},
}
}
</script>

实现思路

使用 vue注册子组件 来捕获点击的当前元素

<!-- 略 -->
<a class="title-list" @click="showDetails(index)" ref="listshow">{{item.title}}</a>
<!-- 略 -->
<script>
// ...
methods: {
showDetails: function (index) {
console.log(this.$refs.listshow[index])
},
}
// ...
</script>

使用 js 的 scrollTo 方法来实现滚动到元素

// element:获取到的要滚动到顶部的元素
window.scrollTo({"behavior": "smooth", "top": element.offsetTop})

将滚动事件直接添加到方法中去后出现滚动偏移的问题
!](https://upload-images.jianshu.io/upload_images/12008559-965f1b2ad7df6c38.gif?imageMogr2/auto-orient/strip)
查找问题的过程就此略过，得到的结论是：

在上一个 table 样式 {display:none} 与新的 table 样式 {display:table} 重新渲染完成之前
scrollTo() 事件就用错误 offsetTop 属性来计算滚动的位置了。
那么我们需要在渲染完成后再开始滚动。

使用 setTimeOut() 来测试结果是可行的

showDetails: function (index) {
if (this.showIndex == index) {
this.showIndex = null
} else {
this.showIndex = index
}
setTimeout(()=>{
window.scrollTo({"behavior": "smooth", "top": this.$refs.listshow[index].offsetTop})
},0)
},

查到 Vue 官方提供了回调方法 $nextTick
作用是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
修改后的方法如下

showDetails: function (index) {
if (this.showIndex == index) {
this.showIndex = null
} else {
this.showIndex = index
}
this.$nextTick(function () {
window.scrollTo({"behavior": "smooth", "top": this.$refs.listshow[index].offsetTop})
})
},

最终实现效果

一些题外话

在找问题的过程中一度想把 JQuery 和 Vue 混用，但总归感觉不是滋味。
@哔哔肾一句话点醒了我:附出处

DOM就是一盘菜，用刀叉用筷子勺子都一样吃。