【Web】vue2.0音乐APP实战中的知识点总结（二）

一.界面展示

二.难点回顾

这一个界面难度明显大于上一个，做起来有些吃力，主要分成以下几个模块制作。

1.数据爬取，以及重新组织。

难点：数组操作

2.listView基础模块编写

难点：列表与右侧的字母列表联动

思路整理：
A.点击右侧字母，跳转到对应的列表

通过绑定点击的监听事件，通过$refs获取DOM节点对应的index，利用better-scroll自带的方法，滚动到对应的列表。

B.滚动右侧字母列表，对应到列表中

通过绑定Move事件，计算滚动的距离，除以列的宽度后，得到对应的index，利用better-scroll自带的方法，滚动到对应的列表。

C.滑动列表，字母跟着高亮（HARD）

在scroll中，设置listenScroll,绑定$emit方法，来监听scroll事件，并获取pos（位置）。

在listview中，将scroll事件绑定scroll方法，然后在该方法中，获取到Pos.y(y方向上的滑动距离)

在watch中，监听scollY和currentIndex(当前显示的索引)
监听数据的变化，当数据变化时，计算每个index对应的高度（calculateHeight）

判断scrollY落到哪个index中，则赋值给currentIndex

3.fixed效果
顶部显示对应的字母

 <div class="list-fixed" ref="fixed" v-show="fixedTitle">      <div class="fixed-title">{{fixedTitle}} </div>    </div>

  computed: {      fixedTitle() {        if (this.scrollY > 0) {          return ''        }        return this.data[this.currentIndex] ? this.data[this.currentIndex].title : ''      }    },

替换时的动画效果：

难点：操作dom:

 this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)`

三.知识点整理

1.created(),props,data变量到底放在哪里？

vue中props,data会实时监测变量的变化，所以没有必要监测的变量就放到created中。

值得注意的是，data返回的是一个对象。

2.better-scroll使用注意事项

父容器高度固定，子容器来撑开它，才能滚动（后续补充！）

3.数组使用方法（能看懂但是不会用）

情况一：

let map={            hot:{                title:HOT_NAME,                items:[]            }        }        list.forEach((item,index)=>{            if(index<HOT_SINGER_LEN){             map.hot.items.push(new Singer({             id:item.Fsinger_mid,             name:item.Fsinger_name}))            }            const key = item.Findex            if(!map[key]){                map[key]={                    title:key,                    items:[]                }            }            map[key].items.push(new Singer({                id:item.Fsinger_mid,                name:item.Fsinger_name            }))        })

情况二

  return this.data.map((group) => {          return group.title.substr(0, 1)        })

4.涉及到DOM渲染的写成延时的，保证DOM渲染可以完成。

 setTimeout(() => {          this._calculateHeight()        }, 20)