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

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

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

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

list-vue 组件在props中接受

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

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

效果图如下

下面来实现功能

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

实现：给shortcutList一个touchstart方法

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

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

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

手指放上去的时候：

手指离开的时候：

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

获取各区间高度值

各区间高度对应的值

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

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

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

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

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

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

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

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

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

得到对应的currentIndex

总结

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

赞 (0)

相关推荐

  • vue一个页面实现音乐播放器的示例

    vue一个页面实现音乐播放器的示例

    本文介绍了vue一个页面实现音乐播放器的示例,分享给大家,具体如下: 效果如下: 项目地址:https://github.com/ermu592275254/MiniMusicPlayer 演示地址: https://ermu592275254.github.io/MiniMusicPlayer/(歌曲链接已失效) 开发前构思 界面 做音乐播放器,界面一定要炫酷.太low了听歌没感觉.本身是为了在上班的时候用,于是做成了一个类似网易云音乐的界面,大小合适.不用兼容手机端. 用css做图标 本怀着

  • Vue2.0 实现歌手列表滚动及右侧快速入口功能

    1 歌手列表 歌手列表页类似于手机通讯录,我们也将其作为一个基础组件独立出来,这部分的逻辑比较简单,这里不做过多的讲解 // base/listview/listview.vue <template> <scroll class="listview" :data="data"> <ul> <li v-for="(group, index) in data" :key="index" c

  • vue音乐播放器插件vue-aplayer的配置及其使用实例详解

    昨天在vue的官网上看到vue-aplayer这个音乐播放器的插件,由于个人有比较喜欢音乐,所以就拿过来玩一玩,感觉还是比较实用的,界面美观. 首先,我们先安装 npm install vue-aplayer --save ,之后在组件中引入  import VueAplayer from 'vue-aplayer',下面就是源码,可供参考: <template> <div> <div style="padding:10px 0;"> <a-p

  • 基于vue-element组件实现音乐播放器功能

    基于vue-element组件实现音乐播放器功能

    最近在写一个基于 github-page 和 gist 的博客, 想加个音乐播放器, 做了一个早上, 发出来分享一下 演示地址 https://github-laziji.github.io 效果 使用到的组件 element组件 布局 Layout 按钮 Button 滑块 Slider 进度条 Progress 弹出框 Popover html5组件 audio 实现代码 更详细的实现可以看 https://github.com/GitHub-Laziji/vblog <template>

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

    快速入口的列表是其实是之前处理的歌手的数据中的关于title的列表 shorcutList属性是计算属性 通过ret数组中的title计算到的 所以我们要在singer.vue组件中将数据传入到list-view组件 list-vue 组件在props中接受 shortcut快速入口列表 所用到的属性 是计算属性 通过将singer.vue组件中传入到list-view组件中的数据计算得到 将得到的shortcutList数据通过v-for展示在页面 效果图如下 下面来实现功能 1.点击右侧快速

  • Android编程开发音乐播放器实例

    Android编程开发音乐播放器实例

    本文实例讲述了Android编程开发音乐播放器,分享给大家供大家参考,具体如下: 音乐播放器中综合了以下内容: SeekBar.ListView.广播接收者(以代码的形式注册Receiver).系统服务.MediaPlayer 实现的功能: 1.暂停/播放.下一首/上一首,点击某一首时播放 2.支持拖动进度条快进 3.列表排序 4.来电话时,停止播放,挂断后继续播放 5.可在后台播放 效果图: 界面: main.xml: <?xml version="1.0" encoding=

  • jQuery开发仿QQ版音乐播放器

    本文通过Html+CSS+jQuery开发仿QQ版的音乐播放器,是前端技术的综合应用,所用素材来源于网络,仅供学习分享使用,如有不足之处,还请指正. 涉及知识点 在本例中用到的知识点如下,按jQuery和CSS进行区分: jQuery 是一个 JavaScript 库, 极大地简化了 JavaScript 编程,常见知识点如下: 通过标签获取jQuery对象:var $audio =$("audio"); 通过选择符获取jQuery对象并设置文本内容:$(".music_pr

  • 自己用python做的一款超炫酷音乐播放器

    自己用python做的一款超炫酷音乐播放器

    目录 前言 一.核心功能设计 UI设计排版布局 关键字音乐列表爬虫 音乐播放 附加功能 二.实现步骤 1. UI设计排版布局 2. 关键字音乐列表爬虫 3. 音乐播放 4. 附加功能 三.结束语 前言 晚上坐在电脑面前,想着一边撸代码,一边听音乐.搜了搜自己想听的歌,奈何好多歌曲都提示需要版权,无法播放! 没办法,想听歌还是得靠自己解决!今天就一起用python自制一款炫酷的音乐播放器吧~ 首先一起来看看最终实现的音乐播放器效果: 下面,我们开始介绍这个音乐播放器的制作过程. 一.核心功能设计

  • Android媒体开发之音乐播放器

    Android媒体开发之音乐播放器

    本文实例为大家分享了Android媒体开发之音乐播放器的具体代码,供大家参考,具体内容如下 可以对音乐文件实现播放.暂停.重播和停止功能.退出应用和回到桌面时音乐停止. 主界面: 主界面配置文件mian.xml: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" andro

  • Android仿网易云音乐播放界面

    Android仿网易云音乐播放界面

    现在很多的播放器的播放界面都是采用光盘的转动,下面是我仿造网易的播放界面.先上两张图: 第一张为播放前的界面,第二张为点击播放按钮的图片.布局文件如下: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent&quo

  • Android版音乐播放器

    Android版音乐播放器

    音乐播放器是一个非常常见的应用,这篇博客就是介绍如何制作一个简单的音乐播放器,这款音乐播放器具有以下的功能:播放歌曲.暂停播放歌曲..显示歌曲的总时长.显示歌曲的当前播放时长.调节滑块可以将歌曲调节到任何时间播放.退出音乐播放器. 实现效果如下 实现方式: 第一步:使用Android Studio创建一个Android工程,并且修改activity_main.xml文件 <?xml version="1.0" encoding="utf-8"?> <

  • Android通过Service实现简单的音乐播放

    Android通过Service实现简单的音乐播放

    android音乐播放效果,简单的服务开启. 这里将用到android的四大组件之一:Service 注意:Service是自大组件之一,需要注册. 什么是服务? 1:"Service" 意思即"服务"的意思, 像 Windows 上面的服务一样,服务是在后台上运行,承担着静悄悄的不为人所注意的工作. 2:Service运行在后台,它是不可见的.无界面的程序. 3:Service可以在很多场合的应用中使用,比如播放多媒体的时候用户启动了其他Activity,这个时候

  • Android使用Service实现简单音乐播放实例

    Service翻译成中文是服务,熟悉Windows 系统的同学一定很熟悉了.Android里的Service跟Windows里的Service功能差不多,就是一个不可见的进程在后台执行. Android中的服务,它与Activity不同,它是不能与用户交互的,不能自己启动的,运行在后台的程序,如果我们退出应用时,Service进程并没有结束,它仍然在后台运行,例如我们打开一个音乐播放器来听音乐,在听音乐的同时也想做下其它的事情,比如上网聊Q.或者上网浏览新闻之类的事情.这样的话,我们就需要用到S

随机推荐