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

首先我们要知道右侧快速入口是为什么高亮？？因为当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. mybatis oracle 批量新增

    假定场景:批量导入用户信息 一般批量新增使用 SELECT … INSERT INTO 和 INSERT INTO … SELECT 我们这次使用第二种 一.先建一张用户信息表模拟批量导入用户信息 c ...

  2. 去掉img与img之间，video与video之间默认的间距（3种方式）

    img,video{ /*第1种方式*/ border:; vertical-align: bottom; /*第2种方式*/ outline-width:0px; vertical-align:to ...

  3. 权限控制（vue）

    权限控制(vue) 经常会遇到,角色权限控制问题,若是页面控制,倒好说,可如果是当前页面部分可见不可见,这就有些麻烦,如果加上条件就更加苛刻.之前只是简单的v-if进行控制,如今想试试指令(网上一直有 ...

  4. linux中文件权限格式与chmod命令以及用户和用户组的管理

    简单了解一下linux中的文件权限格式与chmod命令 chmod命令:改变文件或者目录的权限 格式:chmod [参数] [<权限范围><符号><权限代码>] - ...

  5. 前端Unicode字符图标

    前端Unicode字符图标 原文链接地址:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/20141225979.html

  6. Tomcat报java.io.IOException: Broken pipe错误

    Tomcat报java.io.IOException: Broken pipe错误,如下图: 解决方案:我的原因是因为网络策略导致出现该问题,即网络端口未启用或被限制.

  7. python生成图片验证码

    import PIL from PIL import Image from PIL import ImageDraw,ImageFont import random def get_random_co ...

  8. Java web项目搭建系列之二 Jetty下运行项目

    在项目pom.xml文件中添加Jetty运行配置 在pom.xml文件project节点下插入如下代码: <build> <plugins> <plugin> &l ...

  9. 01.Linux-CentOS系统清理缓存脚本

    #自动清理缓存脚本 [root@k8s-node3 ~]# vim freemem.sh#! /bin/sh#当前已使用内存大小used=`free -m | awk 'NR==2' | awk '{ ...

  10. linux用户管理（useradd、userdel、usermod、groupadd、groupdel、chage、passwd、chpasswd）

    一.用户账户配置文件介绍 /etc/passwd 用户账户信息文件/etc/shadow 用户账户密码文件/etc/group 用户组信息文件/etc/gshadow 用户组密码所在文件(基本废弃)/ ...