基于Vue2.0的音乐播放器(2)——歌手模块

vue

1、分析设计稿

顶部:标题  

左部:歌手列表

右部:快速入口——A-Z的排序切换


数据:动态获取


2、数据获取及处理

2-1:数据

接口获取——https://y.qq.com/portal/singer_list.html

从控制台network界面上,js对应模块找到

fcg-bin/v8.fcg?channel=singer&page=list&key=all_all_all&pagesize=100&pagenum=1&g_tk=5381&jsonpCallback=GetSingerListCallback&loginUin=0&hostUin=0&format=jsonp&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0


若要使得json格式文件进行可视化处理,需要下载jsonView插件,详情可见博文:

http://blog.csdn.net/zxy9602/article/details/78698169,


安装完插件,并在chrome浏览器上进行加载,可以得到如下效果:


之后再进行配置,进行相关设置,对应console控制台下的Headers目录进行相关查看参数配置

                  

   

在项目工程api模块定义一个singer.js文件,用于设置与后端交互的接口,从而加载。

由于采用的是jsonp为主载的方式,且加载的第三方都是https://y.qq.com,所以所对应的公共参数相同

import jsonpfrom'common/js/jsonp'

import { commonParams,options }from'./config'


export functiongetSingerList() {

const url ='https://c.y.qq.com/v8/fcg-bin/v8.fcg'

const data =Object.assign({},commonParams, {

channel: 'singer',

page: 'list',

key: 'all_all_all',

pagesize: 100,

pagenum: 1,

hostUin: 0,

needNewCode:

0,

platform: 'yqq',

g_tk: 1664029744

})


return jsonp(url,data,options)

}


2-2:歌手数据处理

首先,对歌手数据进行处理,其次对数据进行歌手类的封装聚合

2-2.1:获取歌手数据、进行规范化歌手数据、按照/a-zA-Z/进行排序

<scripttype="text/ecmascript-6">

import {getSingerList}from'api/singer'

import {ERR_OK}from'api/config'

import Singerfrom'common/js/singer'


const HOT_NAME ='热门'

const HOT_SINGER_LEN =10


export default {

data() {

return {

// Object

singers: []

}

},

created() {

this._getSingerList()

},

methods: {

// 获取歌手数据

_getSingerList() {

// then()表示promise成功

getSingerList().then((res)=> {

if(res.code ===ERR_OK) {

this.singers =res.data.list

console.log(this._normalizeSinger(this.singers))

}

})

},

// 规范化歌手数据

_normalizeSinger(list) {

// 首先遍历数据

let map = {

// 热门数据

hot: {

title: HOT_NAME,

items: []

}

}

list.forEach((item,index)=> {

if( index <HOT_SINGER_LEN){

// 添加至热门数据

// 由constructor构造器Singer对象,直接引用singer.js

map.hot.items.push(newSinger({

id: item.Fsinger_mid,

name: item.Fsinger_name,

}))

}

// 给list做聚类

const key =item.Findex

if(!map[key]) {

map[key] = {

title: key,

items: []

}

}

map[key].items.push(newSinger({

id: item.Fsinger_mid,

name: item.Fsinger_name

}))

})

// 为了得到有序列表,我们需要处理map

let hot = []

let ret = []

for(letkeyin

map) {

let val =map[key]

if(val.title.match(/[a-zA-Z]/))

{

ret.push(val)

}else if(val.title ===HOT_NAME) {

hot.push(val)

}

}

// 字母排序

ret.sort((a,b)=> {

return a.title.charCodeAt(0) -b.title.charCodeAt(0)

})

// 得到一个一维数组

return hot.concat(ret)

}

}

}

</script>


2-2.2:歌手Singer类的封装聚合

由于在map.hot.items()热门模块、map[key].items()对应的A-Z模块,都是将Singer类的配置文件,push()添加到map里边,所以可以将Singer作为一个类进行封装聚合,从而以对象的形式进行调用。

// Singer做聚合,给对应的singer.vue list表单,定义一个Singer类,以对象形式引用

export defaultclassSinger {

constructor({

id, name }) {

this.id =id

this.name =name

this.avatar =`https://y.gtimg.cn/music/photo_new/T002R300x300M000${id}.jpg?max_age=2592000`

}

}

效果展示:




3、左侧——listview.vue电话簿组件

该模块主要用于加载歌手列表界面,由于需要滚动,所以需要Scroll组件的使用

import Scroll from "base/scroll/scroll"

<template>

<scrollclass="listview":data="data">

<ul>

<li

v-for="(group,index)indata"

class="list-group":key="index">

<h2

class="list-group-title">{{group.title}}</h2>

<ul>

<li

v-for="(item,index)ingroup.items"class="list-group-item":key="index">

<img

class="avatar"

:src="item.avatar">

<span

class="name">{{item.name}}</span>

</li>

</ul>

</li>

</ul>

</scroll>

</template>


<scripttype="text/ecmascript-6">

import Scrollfrom'base/scroll/scroll'


export default {

props: {

data: {

type: Array,

default: []

}

},

components: {

Scroll

}

}

</script>


<stylelang="stylus"scoped>

@import "~common/stylus/variable"


.listview

position: relative

width: 100%

height: 100%

overflow: hidden

background: $color-background

.list-group

padding-bottom: 30px

.list-group-title

height: 30px

line-height: 30px

padding-left: 20px

font-size: $font-size-small

color: $color-text-l

background: $color-highlight-background

.list-group-item

display: flex

align-items:

center

padding: 20px 0 0 30px

.avatar

width: 50px

height: 50px

border-radius: 50%

.name

margin-left: 20px

color: $color-text-l

font-size: $font-size-medium

.list-shortcut

position: absolute

z-index: 30

right: 0

top: 50%

transform: translateY(-50%)

width: 20px

padding: 20px 0

border-radius: 10px

text-align: center

background: $color-background-d

font-family:

Helvetica

.item

padding: 3px

line-height: 1

color: $color-text-l

font-size: $font-size-small

&.current

color: $color-theme

.list-fixed

position: absolute

top: 0

left: 0

width: 100%

.fixed-title

height: 30px

line-height: 30px

padding-left: 20px

font-size: $font-size-small

color: $color-text-l

background: $color-highlight-background

.loading-container

position: absolute

width: 100%

top: 50%

transform: translateY(-50%)

</style>


4、右侧——快速入口的实现(listview.vue)

<!-- 右侧:快速入口/a-zA-Z/ 离开时候需要阻止事件冒泡-->

<div

class="list-shortcut"

@touchstart="onShortcutTouchStart"

@touchmove.stop.prevent="onShortcutTouchMove">

<ul>

<li

v-for="(item,

index) in shortcutList"

class="item"

:data-index="index"

:key="item.key"

:class="{'current' :

currentIndex===index}"

>

{{item}}

</li>

</ul>

</div>

<div

class="list-fixed"

v-show="fixedTitle"

ref="fixed">

<h1

class="fixed-title">{{fixedTitle}}</h1>

</div>

<div

v-show="!data.length"

class="loading-container">

<loading></loading>

</div>


  实现流程:

(1)首先,定义锚点个数,即抓取到“A-Z”歌手字母开头总数“18”

(2)其次,定义滚动scroll的歌手group的数据data,以及将要触发的位置

(3)定义两个事件,手指触摸开始+离开,同时设置每次均是“滚动标题”至上原则

(4)通过计算高度变化,以及定义变量diff高度差的方式,来设置元素的偏移

(5)以“当前触摸元素索引”currentIndex,来设置左边“歌手列表”与右边字母索引“a-z”之间的匹配,完成联动的效果。


运行效果图如下:



const ANCHOR_HEIGHT =

18

const TITLE_HEIGHT =

30


export default {

created() {

// 创建一个touch空对象

this.touch = {}

// 创建一个监听scroll事件

this.listenScroll =

true

this.listHeight = []

this.probeType =

3

},

data() {

return {

scrollY: -1,

// 当前滚动到的位置

currentIndex:

0,

// 滚动的上限与下限的滚动差

diff: -1

}

},

props: {

data: {

type: Array,

default: []

}

},

computed: {

// 右侧快速入口

shortcutList() {

return this.data.map((group)

=> {

return group.title.substr(0,

1)

})

},

// 滚动标题至上

fixedTitle() {

if(this.scrollY >

0) return

return this.data[this.currentIndex] ?

this.data[this.currentIndex].title :

''

}

},

methods: {

onShortcutTouchStart(e) {

// 获取当前触摸的index

let anchorIndex =

getData(e.target,

'index')

// 第一次触发时的位置

let firstTouch =

e.touches[0]

// 获取touch到的垂直方向位置

this.touch.y1 =

firstTouch.pageY

// 记录下来需要锚点的index

this.touch.anchorIndex =

anchorIndex

// 引用listview元素,进行滚动

this._scrollTo(anchorIndex)

},

// 触发离开

onShortcutTouchMove(e) {

let firstTouch =

e.touches[0]

this.touch.y2 =

firstTouch.pageY

// 定义需要滚动对少个data元素,|0表示取整,类似于Math.floor()

let delta = (this.touch.y2 -

this.touch.y1) /

ANCHOR_HEIGHT | 0

// 离开move时候的anchorIndex,由于this.touch.anchorIndex为字符串类型,因此要转换为整型int

let anchorIndex =

parseInt(this.touch.anchorIndex) +

delta

this._scrollTo(anchorIndex)

},

// scroll()

scroll(pos) {

// 实时观测滚动到y轴的距离

this.scrollY =

pos.y

},

// 滚动到哪个索引的元素的位置

_scrollTo(index) {

// 若index === null,返回null

if(!index &&

index !== 0){

return

}

// 若index<0 || index> this.listHeight-2

if(index <

0) {

index = 0

} else if(index >

this.listHeight.length -2) {

index = this.listHeight.length -2

}


// 手动设置scrollY的位置

this.scrollY = -this.listHeight[index]

this.$refs.listview.scrollToElement(this.$refs.listGroup[index],

0)

},

// 计算高度

_calculateHeight() {

this.listHeight = []

const list =

this.$refs.listGroup

let height =

0

this.listHeight.push(height)

for(let

i=0;

i<list.length;

i++) {

let item =

list[i]

height += item.clientHeight

this.listHeight.push(height)

}

}

},

watch: {

// 监听data发生变化

data() {

setTimeout(()

=> {

this._calculateHeight()

}, 20)

},

// 监听scrollY的变化

scrollY(newY) {

const listHeight =

this.listHeight

// 当滚动到顶部,newY>0

if(newY >

0) {

this.currentIndex =

0

return

}

// 当中间部分滚动,

for(let

i=0;

i<listHeight.length -1;

i++) {

let height1 =

listHeight[i]

let height2 =

listHeight[i+1]

// 向上滚动srcollY的值为负 所以加上负号

// 若不是height2下限,且在height1与height2之间

if(-newY >=

height1 && -newY<height2) {

this.currentIndex =

i

// 设置diff

this.diff =

height2 + newY

// console.log(this.diff)

// console.log(this.currentIndex)

return

}

}

// 当滚动到底部,且-newY大于最后一个元素的上限

this.currentIndex =

listHeight.length -2

},

// 实时变化的newVal

diff(newVal) {

let fixedTop = (newVal >

0 && newVal<

TITLE_HEIGHT) ? newVal-TITLE_HEIGHT :

0

if (this.fixedTop ===

fixedTop) {

return

}

this.fixedTop =

fixedTop

// 设置元素的偏移

this.$refs.fixed.style.transform =

`translate3d(0, ${fixedTop}px, 0)`

}

},

components: {

Scroll,

Loading

}

}

以上是 基于Vue2.0的音乐播放器(2)——歌手模块 的全部内容, 来源链接: utcz.com/z/375223.html

回到顶部