vue+vux页面滚动定位(支持上下滑动)

接上篇文章：https://www.cnblogs.com/ligulalei/p/10622778.html
在上篇文章中实现了通过使用scrollIntoView()在使用vux的移动端实现了点击锚点进行页面dom定位，但是这个demo在ios中运行存在兼容性问题,滑动页面时使用position:absolute定位的dom会出现跳动现象，待有时间再解决这个bug。
好了，开始本篇内容部分：
本篇内容是在上篇内容的基础上二次开发而来，实现了双向定位，当页面上下滑动到某个位置时，对应的锚点会出现高亮。看一下运行效果，还阔以吧~

为了把这个问题说清楚，我下面分4个小节分别介绍
1.找到定位坐标
在vue中使用scrollTop这个属性总是失败的很彻底，所以这次压根就不在考虑使用这个玩意儿。我首先在需要滑动的内容区域找到一个定位坐标，这个参考坐标需要满足两点要求：
①这个坐标需要可以在页面中上下滑动
这个坐标需要在滑动的内容区域
②这个坐标需要有个id
通过这个id，在滑动过程中可以实时监听到这个坐标滑动到的位置，当然也可以不是id，只要能得到这个dom就行
我在这个demo中选择的定位坐标是 id="apply1" 的div

<div
id="apply1"
style=" position: relative;top: -120px;display: block;height: 60;overflow: hidden;"
></div>

找到定位坐标，下面就开始监听页面滚动了，通过滚动页面我们看看这个定位坐标的变化值。

2.监听页面滚动
监听事件写在 mounted 中，至于为什么写在这里自行去了解

mounted() {
window.addEventListener("scroll", this.handleScroll, true);
},

这里触发了handleScroll()事件，这个事件定义在methods:中

methods: {
handleScroll(el) {
},
},

3.坐标位置计算

通过在页面滚动过程中，实时计算得到定位坐标点相对于可视屏幕顶部的高度值
代码如下：

handleScroll(el) {
let _pos = document.getElementById("apply1").getBoundingClientRect().top;
console.log('top',_pos);
},

在浏览器中运行一下，看能不能正常得到这个值：

可以看到这个值根据页面的滚动在实时变化，ok~到这里就是万事俱备，只欠东风了。
我们只要的到这个值，通过计算值的区域范围就可以给锚点进行高亮显示了。
此外我还想再多说两句，在这里我用到了这个方法：getBoundingClientRect()
这个方法在这里做么子内？

Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
浏览器兼容行：

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
4.锚点高亮效果
通过得到的这个值，接下来怎么进行锚点高亮，我想你应该知道了吧。
下面是我这个demo中使用的高亮方法

methods: {
handleScroll(el) {
let _pos = document.getElementById("apply1").getBoundingClientRect().top;
if (-88 < _pos) {
this.appleNumber = 1;
}
if (_pos < -150) {
this.appleNumber = 2;
}
if (_pos < -300) {
this.appleNumber = 3;
}
if (_pos < -460) {
this.appleNumber = 4;
}
if (_pos < -780) {
this.appleNumber = 5;
}
if (_pos < -930) {
this.appleNumber = 6;
}
if (_pos < -1090) {
this.appleNumber = 7;
}
if (_pos < -1130) {
this.appleNumber = 8;
}
},
},

锚点html代码：

<div style=" width: 100%;z-index: 2; position: absolute;margin-top: -10px;">
<tab bar-active-color="#10aeff">
<tab-item :selected="1==appleNumber">
<a @click="jump(1)">锚点定位一</a>
</tab-item>
<tab-item :selected="2==appleNumber">
<a @click="jump(2)">锚点定位二</a>
</tab-item>
<tab-item :selected="3==appleNumber">
<a @click="jump(3)">锚点定位三</a>
</tab-item>
<tab-item :selected="4==appleNumber">
<a @click="jump(4)">锚点定位四</a>
</tab-item>
<tab-item :selected="5==appleNumber">
<a @click="jump(5)">锚点定位五</a>
</tab-item>
<tab-item :selected="6==appleNumber">
<a @click="jump(6)">锚点定位六</a>
</tab-item>
<tab-item :selected="7==appleNumber">
<a @click="jump(7)">锚点定位七</a>
</tab-item>
<tab-item :selected="8==appleNumber">
<a @click="jump(8)">锚点定位八</a>
</tab-item>
</tab>
</div>

划个重点：

1.选取定位坐标
2.监听页面滚动，获取定位坐标相对于屏幕顶部的高度值
3.高亮效果触发