Vue 开发音乐播放器之歌手页右侧快速入口功能


Posted in Javascript onAugust 08, 2018

快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表

Vue 开发音乐播放器之歌手页右侧快速入口功能

shorcutList属性是计算属性 通过ret数组中的title计算到的

所以我们要在singer.vue组件中将数据传入到list-view组件

Vue 开发音乐播放器之歌手页右侧快速入口功能

list-vue 组件在props中接受

Vue 开发音乐播放器之歌手页右侧快速入口功能

shortcut快速入口列表 所用到的属性 是计算属性 通过将singer.vue组件中传入到list-view组件中的数据计算得到

Vue 开发音乐播放器之歌手页右侧快速入口功能

将得到的shortcutList数据通过v-for展示在页面

Vue 开发音乐播放器之歌手页右侧快速入口功能

效果图如下

Vue 开发音乐播放器之歌手页右侧快速入口功能

下面来实现功能

1、点击右侧快速入口 左侧的列表跳转到对应位置

实现:给shortcutList一个touchstart方法

Vue 开发音乐播放器之歌手页右侧快速入口功能

Vue 开发音乐播放器之歌手页右侧快速入口功能

Vue 开发音乐播放器之歌手页右侧快速入口功能

Vue 开发音乐播放器之歌手页右侧快速入口功能

Vue 开发音乐播放器之歌手页右侧快速入口功能

Vue 开发音乐播放器之歌手页右侧快速入口功能

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

功能2、滑动右侧的快速入口 左侧的歌手列表对应滑动 我们只需要获取到手指放在右侧快速列表之前的位置 和获取到手指离开右侧快速列表的位置 做差 然后处理快速列表的li的高度 就可以知道变化的索引的值 然后让左侧的歌手列表运动到变化的索引处即可

给shortcutList一个@touchmove.stop.prevent="onShortcutTouchMove"

Vue 开发音乐播放器之歌手页右侧快速入口功能

手指放上去的时候:

Vue 开发音乐播放器之歌手页右侧快速入口功能

手指离开的时候:

Vue 开发音乐播放器之歌手页右侧快速入口功能

功能三:当左侧歌手列表滑到对应的位置 右侧快速入口对应索引处高亮显示 此时要监听scroll事件 将左侧列表滚动的scrollY与左侧列表对应的每个区间li的高度将比较 得到currentIndex的值 当右侧快速入口的index===currentIndex时高亮显示

获取各区间高度值

Vue 开发音乐播放器之歌手页右侧快速入口功能

各区间高度对应的值

Vue 开发音乐播放器之歌手页右侧快速入口功能

因为我们之前给height=0 然后前一个的上限值 等于后一个的下限值 所以我们的高度数组中的值 会比右侧列表中的真实数据的个数多一个

Vue 开发音乐播放器之歌手页右侧快速入口功能

监控data 我们需要监控两个值:一个是当scroll滚动列表中的数据变化导致高度变化的时候 我们对应的高度区间也要变化

Vue 开发音乐播放器之歌手页右侧快速入口功能

Vue 开发音乐播放器之歌手页右侧快速入口功能

Vue 开发音乐播放器之歌手页右侧快速入口功能

上图中的scroll属性是儿子组件scroll的 scroll方法是父亲组件listview的

儿子组件:this.scroll.on('scroll',()=>{me.$emit('scroll',pos)})

这行代码的意思是:当我触发滚动事件的时候就向上派发一个名为scroll的方法 还带有参数pos 父组件接受到派发的这个方法之后 就触发自己绑定的方法 本项目中父组件自己绑定的方法叫scroll

$emit()方法的第一个参数scroll要和父组件的@scroll项对应

Vue 开发音乐播放器之歌手页右侧快速入口功能

f父元素触发自己绑定的scroll方法之后 将pos.y的值赋值给了this.scrollY

Vue 开发音乐播放器之歌手页右侧快速入口功能

j接下来我们监控listview中的data的变化 以及scrollY的变化 每次data变了就要重新计算calculateHeight

监控到scrollY的变化然后将_calculateHeight()方法中得到的各区间的数组的高度与scrollY相比较

得到对应的currentIndex

Vue 开发音乐播放器之歌手页右侧快速入口功能

Vue 开发音乐播放器之歌手页右侧快速入口功能

Vue 开发音乐播放器之歌手页右侧快速入口功能

总结

以上所述是小编给大家介绍的Vue 开发音乐播放器之歌手页右侧快速入口功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在 IE 中调用 javascript 打开 Excel 表
Dec 21 Javascript
JS高级拖动技术 setCapture,releaseCapture
Jul 31 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
Jan 15 Javascript
基于jquery实现发送文章到手机的代码
Dec 26 Javascript
JQuery标签页效果的两个实例讲解(4)
Sep 17 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 Javascript
详解10分钟学会vue滚动行为
Sep 21 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
webpack 模块热替换原理
Apr 09 Javascript
详解vue中axios的封装
Jul 18 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
JS自定义右键菜单实现代码解析
Jul 16 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 #jQuery
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 #Javascript
JavaScript引用类型Date常见用法实例分析
Aug 08 #Javascript
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 #Javascript
JavaScript引用类型Object常见用法实例分析
Aug 08 #Javascript
微信小程序wepy框架笔记小结
Aug 08 #Javascript
angularJs中$http获取后台数据的实例讲解
Aug 08 #Javascript
You might like
一个自定义位数的php多用户计数器代码
2007/03/11 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php自定义函数实现二维数组排序功能
2016/07/20 PHP
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
ExtJs的Date格式字符代码
2010/12/30 Javascript
BootStrap文件上传样式超好看【持续更新】
2016/05/10 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
JavaScript中apply方法的应用技巧小结
2016/09/29 Javascript
React教程之Props验证的具体用法(Props Validation)
2017/09/04 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
angular中的post请求处理示例详解
2020/06/30 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Django多数据库的实现过程详解
2019/08/01 Python
wxPython多个窗口的基本结构
2019/11/19 Python
tensorflow将图片保存为tfrecord和tfrecord的读取方式
2020/02/17 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
金融学专科生自我鉴定
2014/02/21 职场文书
大学生创业计划书
2014/08/14 职场文书
党员进社区活动总结
2015/05/07 职场文书
高中地理教学反思
2016/02/19 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
Redis IP地址的绑定的实现
2021/05/08 Redis
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA