问题一：当我们点击右侧快速入口的时候  被点击的地方高亮

首先我们要知道右侧快速入口是为什么高亮？？因为当watch()监控到scrollY的变化了的时候  将scrollY的值和listHeight相比较  判断scrollY在哪个group区间  从而判断高亮的currentIndex  所以要想高亮  就要让scrollY变化  但点击右侧快速入口的时候 我们没有有scroll方法  直接走的scrollTo方法  所以无法派发scroll事件  触发scrollY的变化   所以我们要手动的让scrollY变化

问题二：右侧快速入口滑动到顶部时候 也会跳到最后一个z上去

当我们按住鼠标一直往上滚动的时候  此时的index可能为负数  而且会一直变小

当我们按住鼠标一直往下滚动的时候 滑动到底部的index可能会变为无穷大

因为我一直在执行onShortcutTouchMove事件  此时pageY一直在增加   所以索引一直增加

所以我们要处理idnex的边界情况

当index<0时  我们的index=0

当index>this.listHeight.length-2  那么我们的index=this.listHeight.length-2

思路：总结左右联动的思路：如果我们想达到左右联动的效果，那么首先我们必须要知道它的实时的滚动位置scrollY  根据滚动位置  来计算当前的滚动位置落在了左侧的哪一个group的区间 当我们算到group区间以后  我们就知道右侧对应的是哪一个索引  以及哪个区间索引应该高亮

结合到vue中我们是用到了watch去观测这个变化  配合scroll(pos)方法  实时派发出scrollY=pos.y  scrollY的值  我们去观测scrollY的变化

观测scrollY值的变化我们就可以计算到currentIndex  根据currentIndex  在根据Dom的一个映射 :class="{'active':currentIndex===index}"

用Vue来实现音乐播放器（十八）：右侧快速入口点击高亮的更多相关文章

  1. 用Vue来实现音乐播放器（八）：自动轮播图啊

    slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <d ...

  2. vue小练习--音乐播放器

    1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...

  3. 用Vue来实现音乐播放器（三十八）：歌词滚动列表的问题

    1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...

  4. Vue实战：音乐播放器（一） 页面效果

    先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心

  5. 用Vue来实现音乐播放器（十七）：歌手页右侧快速入口实现

    快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性   通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到l ...

  6. 用Vue来实现音乐播放器（二十）：Vuex初始化及歌手数据的配置

    state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...

  7. 用Vue来实现音乐播放器（十六）：滚动列表的实现

    滚动列表是一个基础组件  他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件     <template> < ...

  8. 用Vue来实现音乐播放器（十四）：歌手数据接口抓取

    第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法  使他能够在singer.vue中调用 import jsonp from '../common/j ...

  9. 用Vue来实现音乐播放器（四十）：歌单详情页布局以及Vuex实现路由数据通讯

    1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面  利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中  定义一个别名 ...

随机推荐

  1. textarea标签输出内容时不能顶格（左对齐）输出

    我用textarea输出文本内容的时候出现下面的问题:文本内容在action里测试没有问题(文本内容前面没有空格),但是在jsp页面textare标签中输出文本内容时,文本内容前面却出现一些多余的空格 ...

  2. 配置ssh免密码登录设置后还是提示需要输入密码

    工作之余搭建了一个集群测试,配置了ssh免密码登录以后  ,所有的ssh-copy-id 密钥也都分发了 ,各项配置也没有问题,但是使用ssh进行免密登录时,没有报错,但是要输入被ssh主机的登录密码 ...

  3. Oracle 赋予指定用户dba权限

    指定用户赋权限 1.链接数据库地址,使用ssh登录 2.sudo -i 3.grant dba to 用户名;

  4. nmblookup - 基于TCP/IP上的NetBIOS客户用于查询NetBIOS名字的程序

    总览 SYNOPSIS nmblookup [-M] [-R] [-S] [-r] [-A] [-h] [-B <broadcast address>] [-U <unicast a ...

  5. 【转】UBOOT——启动内核

    转自:https://www.cnblogs.com/biaohc/p/6403863.html 1:什么是UBOOT,为什么要有UBOOT? UBOOT的主要作用是用来启动linux内核,因为CPU ...

  6. IP地址与子网掩码逐位相与

    逐位相与说的其实就是子网掩码与网络地址相同位置的数字相加,当和为2的时候该位置写作1,否则的话写作0

  7. flask中自定义日志类

    一:项目架构 二:自定义日志类 1. 建立log.conf的配置文件 log.conf [log] LOG_PATH = /log/ LOG_NAME = info.log 2. 定义日志类 LogC ...

  8. VS2015开发常用快捷键

    以下内容均Ctrl+后面的按钮 M-O\P折叠 K-F 格式化 K-U\C注释 K-S侧外代码-(区域代码) 代码片段 ctor 自动生成默认的构造函数 prop 自动生成get set方法 cw 自 ...

  9. Python---协程---重写多进程

    一. # 匹配一行文字中所有开头的字母import re s = 'i love you but you don\'t love me' # \b\m findallcontent = re.find ...

  10. NOIP模拟赛(by hzwer) T2 小奇的序列

    [题目背景] 小奇总是在数学课上思考奇怪的问题. [问题描述] 给定一个长度为 n 的数列,以及 m 次询问,每次给出三个数 l,r 和 P, 询问 (a[l'] + a[l'+1] + ... + ...