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的时候写的学习笔记
Dec 30 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php数组中包含中文的排序方法
2014/06/03 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
node.js中的path.basename方法使用说明
2014/12/09 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
2015/05/29 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
JS实现的Unicode编码转换操作示例
2017/04/28 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
详解JavaScript 中 if / if...else...替换方式
2018/07/15 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python调用windows api锁定计算机示例
2014/04/17 Python
python中join()方法介绍
2018/10/11 Python
分析经典Python开发工程师面试题
2019/04/08 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
python线程优先级队列知识点总结
2021/02/28 Python
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
租房合同协议书
2014/04/09 职场文书
安全目标管理责任书
2014/07/25 职场文书
人身损害赔偿协议书格式
2014/11/01 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
警用民用对讲机找不同
2022/02/18 无线电
关于Python使用turtle库画任意图的问题
2022/04/01 Python