博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
用Vue来实现音乐播放器(十八):右侧快速入口点击高亮
阅读量:6853 次
发布时间:2019-06-26

本文共 894 字,大约阅读时间需要 2 分钟。

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

首先我们要知道右侧快速入口是为什么高亮??因为当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}"

 

转载于:https://www.cnblogs.com/catbrother/p/9180949.html

你可能感兴趣的文章
vue 项目打包部署,通过nginx 解决跨域问题
查看>>
LightKV-高性能key-value存储组件
查看>>
小程序
查看>>
ES6变量的解构赋值
查看>>
ansible自动化运维详细教程及playbook详解
查看>>
快速解决Dev c++无法调试
查看>>
自学算法笔记
查看>>
python通过luhn算法实现的信用卡卡号验证源码
查看>>
小米手机5X获得Root权限的方法
查看>>
中国联通把百度指向了127.0.0.1?
查看>>
Java程序员这样优化简历,一投制胜!
查看>>
runtime(消息转发)
查看>>
设计模式——建造者模式
查看>>
Async & generator & Promise
查看>>
解决vagrant ssh登录时permission deny的问题
查看>>
Dapper,大规模分布式系统的跟踪系统
查看>>
Spring源码之XMLBeanFactory
查看>>
PopupWindow 点击外部区域无法关闭的问题
查看>>
jQuery 遍历
查看>>
开源的丰富的flutter Icons库
查看>>