用Vue来实现音乐播放器(十八):右侧快速入口点击高亮
问题一:当我们点击右侧快速入口的时候 被点击的地方高亮
首先我们要知道右侧快速入口是为什么高亮??因为当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来实现音乐播放器(十八):右侧快速入口点击高亮的更多相关文章
- 用Vue来实现音乐播放器(八):自动轮播图啊
slider.vue组件的模板部分 <template> <div class="slider" ref="slider"> <d ...
- vue小练习--音乐播放器
1 首先建一个文件夹 放几首歌曲 2 看代码 1)基本版本 <!DOCTYPE html> <html lang="zh-CN"> <head> ...
- 用Vue来实现音乐播放器(三十八):歌词滚动列表的问题
1.频繁切换歌曲时,歌词会跳来跳去 原因: // 歌词跳跃是因为内部有一个currentLyric对像内部有一些功能来完成歌词的跳跃 //每个currentLyric能实现歌曲的播放跳到相应的位置 是 ...
- Vue实战:音乐播放器(一) 页面效果
先看一下效果图 首页 歌单详情页 歌手列表 歌手详情页 排行页面 榜单的详情页(排序样式) 搜索页面 搜索结果 播放器内核 歌词自动滚动 播放列表 用户中心
- 用Vue来实现音乐播放器(十七):歌手页右侧快速入口实现
快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性 通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到l ...
- 用Vue来实现音乐播放器(二十):Vuex初始化及歌手数据的配置
state:所有组件的所有状态和数据 放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...
- 用Vue来实现音乐播放器(十六):滚动列表的实现
滚动列表是一个基础组件 他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件 <template> < ...
- 用Vue来实现音乐播放器(十四):歌手数据接口抓取
第一步:在api文件夹下创建一个singer.js文件 返回一个getSingerList()方法 使他能够在singer.vue中调用 import jsonp from '../common/j ...
- 用Vue来实现音乐播放器(四十):歌单详情页布局以及Vuex实现路由数据通讯
1.歌单详情页是推荐页面的二级路由页面 将推荐页面歌单的数据传到歌曲详情页面 利用vuex 1.首先在state下定义一个歌单对象 disc{} 2.在mutaions-types中 定义一个别名 ...
随机推荐
- 基于RSA的前后端登陆密码加密JAVA实现(转)
RSA加密算法简介 SA加密算法是一种非对称加密算法.在公开密钥加密和电子商业中RSA被广泛使用.对极大整数做因数分解的难度决定了RSA算法的可靠性.换言之,对一极大整数做因数分解愈困难,RSA算法愈 ...
- http请求响应丢包问题
在与合作方联调某个明细数据接口的时候发现 1.当请求条数为4,content-length<1500时,数据可以正确返回. 2.当请求条数为5,content-length>1500时,无 ...
- SQL Server to MySQL
使用 Navicat 导入向导迁移 会遇到以下问题 SQL Server 中的 GUID 类型字段会变成 {guid} 多个外层花括号, 导致程序问题. 部分字段类型长度不大一致, 需要手工调整. . ...
- mkdir -建立目录
总览 mkdir [选项] 目录... POSIX 选项: [-p] [-m mode] GNU 选项(缩写): [-p] [-m mode] [--verbose] [--help] [--vers ...
- mailaddr - 关于邮件地址的描述
DESCRIPTION 描述 本手册给出的是 Internet 使用的 SMTP 邮件地址的简要描述.这些地址的通常的格式是 user@domain 这里的域 (domain) 是分级的子域的列表,子 ...
- python二维码模块(qrcode)
qrcode模块安装 运行命令行工具(cmd),使用pip安装工具分别安装qrcode. pip install qrcode 先来个简单的例子 import qrcode # 二维码内容 data ...
- oracle 主键自增并获取自增id
1 创建表 /*第一步:创建表格*/ create table t_user( id int primary key, --主键,自增长 username varchar(20), password ...
- Insomni'hack teaser 2019 - Reverse - beginner_reverse
参考链接 https://ctftime.org/task/7455 题目描述 A babyrust to become a hardcore reverser 点我下载 解题过程 一道用rust写的 ...
- git push -u origin master和git push <远程主机名> <本地分支名>:<远程分支名>作用
git push git push命令用于将本地分支的更新,推送到远程主机.它的格式与git pull命令相仿. $ git push <远程主机名> <本地分支名>:< ...
- 简单后台登录逻辑实现Controller
package com.fei.controller.admin; import javax.servlet.http.HttpSession; import org.springframework. ...