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 相关文章推荐
浅谈Javascript事件处理程序的几种方式
Jun 27 Javascript
jQuery.each()用法分享
Jul 31 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
jquery操作select常见方法大全【7种情况】
May 28 jQuery
layui 关闭open弹出框 刷新table表格页面的方法
Sep 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
yii2 数据库读写分离配置示例
2017/02/10 PHP
input 输入框内的输入事件详细分析
2010/03/17 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
2010/04/27 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
javascript setTimeout和setInterval计时的区别详解
2013/06/21 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
2015/08/05 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
VUE长按事件需求详解
2017/10/18 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
详解vue高级特性
2020/06/09 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
python统计cpu利用率的方法
2015/06/02 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
详解Django+Uwsgi+Nginx 实现生产环境部署
2018/11/06 Python
Django实现基于类的分页功能
2019/10/31 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
精彩自我鉴定
2014/01/16 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL