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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
JS创建类和对象的两种不同方式
Aug 08 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
jqGrid用法汇总(全经典)
Jun 28 Javascript
js实现弹窗暗层效果
Jan 16 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
微信小程序websocket聊天室的实现示例代码
Feb 12 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
Vue的click事件防抖和节流处理详解
Nov 13 Javascript
vue vant Area组件使用详解
Dec 09 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 转义使用详解
2013/07/15 PHP
C/S和B/S两种架构区别与优缺点分析
2014/10/23 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
简单三步,搞掂内存泄漏
2007/03/10 Javascript
js几个验证函数代码
2010/03/25 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
JS中令人发指的valueOf方法介绍
2013/02/22 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
2019/09/23 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python实现基于两张图片生成圆角图标效果的方法
2015/03/26 Python
Python中自定义函数的教程
2015/04/27 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
Numpy数组的保存与读取方法
2018/04/04 Python
Python unittest模块用法实例分析
2018/05/25 Python
python实现画一颗树和一片森林
2018/06/25 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
物流专业大学生的自我鉴定
2013/11/13 职场文书
工作检讨书范文
2015/01/23 职场文书
煤矿安全保证书
2015/02/27 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
雷锋之歌观后感
2015/06/10 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
python模板入门教程之flask Jinja
2022/04/11 Python
Docker 镜像介绍以及commit相关操作
2022/04/13 Servers