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 XML实现两级级联下拉列表
Nov 10 Javascript
Javascript 获取LI里的内容
Dec 17 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
Jul 15 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
jQuery获取iframe的document对象的方法
Oct 10 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
Nov 19 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
plupload+artdialog实现多平台上传文件
Jul 19 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
JS计算斐波拉切代码实例
Sep 12 Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 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实现的常见排序算法汇总
2014/09/08 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
Div自动滚动到末尾的代码
2008/10/26 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
2009/09/15 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JsRender for object语法简介
2014/10/31 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
js+css3实现简单时钟特效
2020/09/13 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
Python collections模块实例讲解
2014/04/07 Python
python测试驱动开发实例
2014/10/08 Python
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python列表的增删改查实例代码
2018/01/30 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
使用python生成杨辉三角形的示例代码
2018/08/29 Python
​如何愉快地迁移到 Python 3
2019/04/28 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
Canvas高级路径操作之拖拽对象的实现
2019/08/05 HTML / CSS
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
妇产医师自荐信
2014/01/29 职场文书
青年文明号创建承诺
2014/03/31 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python