Vue在音乐播放器歌手页面右侧开发快速进入功能

快速输入列表实际上是歌手之前处理过的数据中的标题列表

ShorcutList属性是按ret数组中的标题计算的

因此，我们将把数据传递给singer.vue组件中的列表视图组件

道具中接受list-vue组件

快捷快速输入列表中使用的属性是通过将数据从singer.vue组件传输到list-view组件来计算的。

通过v-for在页面上显示获得的快捷方式列表数据

效果图如下

实现了以下功能

1.单击右侧快速入口左侧的列表，跳转到相应的位置

实现：给shortcutList一个touchstart方法

此时，右侧快速入口左侧的歌手列表跳转功能已经实现

功能二，滑动快速入口右侧，滑动左侧歌手列表。我们只需要得到手指放在快速列表右侧之前的位置和手指离开快速列表右侧的位置之差，然后处理快速列表li的高度，就可以知道改变后的索引值。然后让左边的歌手列表移动到已更改的索引。

给shortcutList一个@ touch move . stop . prevent=' on shortcuttouchmove '

当你竖起手指时：

当手指离开时：

功能三：左侧歌手列表滑动到对应位置时，在右侧快速入口对应索引处高亮显示。此时，有必要监控滚动事件。左侧列表的滚动将与左侧列表对应的每个间隔li的高度进行比较，以获得currentIndex的值。当右侧快速入口的索引为===CurrentIndex时，会高亮显示。

获取每个区间高度值

对应于每个间隔高度的值

因为我们之前给了height=0，然后前者的上限等于后者的下限，所以我们的height数组中的值将比右列表中的真实数据数量多一个

为了监控数据，我们需要监控两个值：一个是当滚动列表中的数据变化导致高度变化时，我们对应的高度间隔也会发生变化

上图中的滚动属性是子组件的滚动方法是父组件列表视图的滚动方法

子组件：这个。scroll.on ('scroll '，()={me。$ emit ('scroll '，pos)})

这一行代码的意思是：当我触发滚动事件时，我调度一个名为带参数向上滚动的方法。pos父组件在收到分派的方法后会触发自己的绑定方法。父组件在这个项目中绑定自己的方法叫做滚动

$emit()方法的第一个参数scroll应该对应于父程序集的@scroll项

在父元素触发其绑定滚动方法后，它会将位置y的值分配给这个

接下来，我们监控列表视图中数据的变化和滚动的变化，并在每次数据变化时重新计算计算高度。

监视滚动的变化，然后将_ calculateHeight()方法中获得的每个间隔的数组高度与滚动进行比较

获取相应的currentIndex

摘要

以上是边肖介绍的Vue音乐播放器歌手页面右侧的快速进入功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！