记录一下这周学习到的一个vue功能实现原理分析(疫情期间逆战!)

这里我们先来看一下要实现的效果：

这两张图片的效果区别就是当我们内容部分往下滑动时，经过了首字母开头的分类，则右边的关键字母导航就会随之变亮，这种效果我们日常在app上面是可以说很经常看到这种效果了。那下面我就来分享一下这个功能的基本逻辑思维。

首先我们先把需要做的步骤分析一下

首先把需要的东西先看一下：


数据方面：


注： data里面的singers已经在下面请求到数据而且赋值上去了

一 渲染页面

(1) 发送请求，获取到我们的内容部分的数据，并处理为我们需要的数据解构(这里就不多说了)

(2) 把数据渲染到内容后，我们可以通过vue脚手架中的computed属性函数，在里面我们生成一个数据(用来渲染右边的关键栏)，这个数据的来源从我们第一步请求回来的数据里面的关键字栏(hot,A,B,C,…)

二 获取offsetTop

(1) 我们需要遍历我们的内容数据里的字母关键字数据字段。这里我们需要获取到他们的dom元素。

(2) 通过ref=""的属性，在dom上面绑定一个ref，之后在遍历一下this.$refs里面我们拿到的所有关键字dom元素，我们取到的会是一个对象形式的数据。

(3) 创建一个空数据，用于存储每2个关键字烂之间的offsetTop区间数

(4) 遍历(2)中的对象数据，通过forin遍历，并且加一个判断。在这之前我们需要监听一下页面的滚动数据，这里内容页的滚动因为使用的是better-scroll。所以可以通过监听的形式获取到页面的滚动值，并把这个值给绝对值化，因为这个值取下来是一个负的，我们需要用Math.abs()取为正值。

(5)这里我们循环我们上面拿到的数组区间，并且if判断我们当前页面滚动的值(y)在不在我们要求的范围区间内，第二个判断条件是一个临界值判断。

三 实现屏幕滑动对应字母栏停留顶部

(1) 我们讲第二部获得到的scollIndex值在右边拦中的数据中找出来

(2)最后将找出来的值赋值给我们的this.selfFindex

最后，小编第一次分享写博客，可能有些写的不清晰，各位客观就凑合着看一下吧哈哈哈，希望可以帮到大家!!!