歌手页面类似于通讯录，相应的功能有：获取数据、排序、快速切换、左右联动、滚动等

1.获取数据

在api/singer.js中导入JSONP方法，获取singers,在singer.vue中

created() {this._getSingerList()
},

_getSingerList() {getSingerList().then((res) => {if (res.code === ERR_OK) {console.log(res.data.list)//序列化数据this.singers = this._normallizeSinger(res.data.list)}})
},

得到的数据结构入如下：

2.数据序列化

这样结构不符合我们的需求，需要序列化；
在序列化时候，相应的分类中push是singer实例，目的是生成avatar

_normallizeSinger(list) {
//1.定义一个maplet map = {hot: {title: HOT_NAME,items: []}}
//2.将前 HOT_SINGER_LEN = 10个放入‘热’分类中      list.forEach((item, index) => {if (index < HOT_SINGER_LEN) {map.hot.items.push(new Singer({id: item.Fsinger_mid,name: item.Fsinger_name}))}
//3.其他的按照Findex分类const key = item.Findex    //A B C D...if (!map[key]) {map[key] = {title: key,items: []}}map[key].items.push(new Singer({id: item.Fsinger_mid,name: item.Fsinger_name}))})
//4.为了得到有序列表，我们需要排序map,定义一个hot一个其他retlet hot = []let ret = []for (let key in map) {let val = map[key]//如果是A B C等在push到ret其他if (val.title.match(/[a-zA-Z]/)) {ret.push(val)//如果是‘热’HOT_NAME则放入hot} else if (val.title === HOT_NAME) {hot.push(val)}}
//5.对其他ret进行排序ret.sort((a, b) => {return a.title.charCodeAt(0) - b.title.charCodeAt(0)})
//6.合并两个数组return hot.concat(ret)},

3.singer实例化

在序列化时候，相应的分类中push是singer实例，目的是生成avatar

export default class Singer {constructor ({id, name}) {this.id = idthis.name = namethis.avatar = `http://y.gtimg.cn/music/photo_new/T001R150x150M000${id}.jpg?max_age=2592000`}
}

4.样式

这里要进行滚动，所以使用了scroll.vue组件

5.数据序列化后传入list-vue

<div class="singer" ref="singer"><list-view ref="list" @select="selectSinger" :data="singers"></list-view><router-view></router-view>
</div>

通过：data传入this.singers,同时，emit事件selectSinger,导航至singer-detail.vue中

selectSinger(singer) {this.$router.push({path: `/singer/${singer.id}`})//同时，将singer的信息放入vuex中this.setSinger(singer)
},

6.list-vue 右→左联动

将this.singer传入list-vue中，数据的渲染左侧歌手列表，右侧导航索引

6.1右侧导航：索引数据

利用计算属性，获取右侧导航数据，然后渲染

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

6.2右侧导航：定义touch事件

 <!--touchumove.stop.prevent 阻止事件冒泡、默认行为（浏览器滚动）--><div class="list-shortcut" @touchstart="onShortCutTouchStart" @touchmove.stop.prevent="onShortCutTouchMove"><ul><li :key="item.title" v-for="(item,index) in shortcutList":data-index="index"   //自定义属性data-index用来获取当前li的索引值:class="{'current':currentIndex === index}"class="item">{{item}}</li></ul></div>

牵涉到滚动事件，同样的思路:在created中创建this.touch = {}

onShortCutTouchStart(e) {let anchorIndex = getData(e.target, 'index') //getData公共方法，获取当前点击的li的索引let firstTouch = e.touches[0]this.touch.y1 = firstTouch.pageYthis.touch.anchorIndex = anchorIndexthis._scrollTo(anchorIndex)
},
onShortCutTouchMove(e) {let firstTouch = e.touches[0]this.touch.y2 = firstTouch.pageY
//获取相应的滑动了几个li的高度ANCHER_HEIGHT=18let delta = (this.touch.y2 - this.touch.y1) / ANCHER_HEIGHT | 0
//根据计算的滑动几个li数量，得出索引值let anchorIndex = parseInt(this.touch.anchorIndex) + delta
//左侧根绝索引值进行滚动this._scrollTo(anchorIndex)
},
_scrollTo(index) {//点击最顶部或者底部的时候，因为时间在div上，而div{padding:20px 0},所以，这个时候没有点击到li元素，也就无法获取index,因此index：nullif (!index && index !== 0) {return}//滑动到最顶部或者底部if (index < 0) {index = 0} else if (index > this.listHeight.length - 2) {//this.listHeight.length - 2：正常情况index=this.listHeight.length-1,这里是因为在初始化this.listHeight的方法_caculateHeight中push了一个height = 0index = this.listHeight.length - 2}//0:是表示缓动动画时间 这里表示立刻滚动没有动画//调用scroll组件的方法this.$refs.listview.scrollToElement(this.$refs.listGroup[index], 0)//scrollY:左→右联动的滑动距离this.scrollY = -this.listHeight[index]
},

7. 左→右联动

7.1 组件有数据的时候就开始计算高度

当传入数据的时候，开始计算高度:data="singers"
同touch一样在created中定义this.listHeight=[]共享不用双向绑定的数据

watch: {data() {setTimeout(() => {this._caculateHeight()}, 20)},
····
}
####7.2 将左侧列表高度叠加放入一个数组
methods:{_caculateHeight() {this.listHeight = []const list = this.$refs.listGrouplet height = 0this.listHeight.push(height)for (let i = 0; i < list.length; i++) {let item = list[i]height += item.clientHeightthis.listHeight.push(height)}}
}

7.3 监听左侧滚动

牵涉到滚动，我们就需要使用scroll组件

在methods中定义scroll事件

scroll(pos) {//pos.y 滑动时负数，到顶部的时候，向下滑动空白回弹，这时是正数this.scrollY = pos.y
},

在watch中观察scrollY

 watch: {
·······scrollY(newY) {const listHeight = this.listHeight//到顶部的时候，向下滑动空白回弹，这时是正数，newY>0if (newY > 0) {//this.currentIndex给左侧导航高亮 this.currentIndex = 0return}//滚动至中部for (let i = 0; i < listHeight.length - 1; i++) {let height1 = listHeight[i]let height2 = listHeight[i + 1]if (-newY >= height1 && -newY < height2) {//滚动左侧，从而找到相应的索引，右侧导航高亮this.currentIndex = i//比如是A上限距离顶部的距离 newY是个负值，相当于减this.diff = height2 + newYreturn}}//滚动至底部，且-newY大于最后一个元素的上限  因为listHeight首先push一个height=0this.currentIndex = listHeight.length - 2},
······

8. 左侧列表的过渡效果

.list-fixedposition: absolutetop: 0left: 0width: 100%.fixed-titleheight: 30pxline-height: 30pxpadding-left: 20pxfont-size: $font-size-smallcolor: $color-text-lbackground: $color-highlight-background

在data中定义{diff:-1}
在watch中观察diff

diff(newVal) {//newVal - TITLE_HEIGHT为负值，因为transform往上是负值//当newVal<TITLE_HEIGHT(title的高度30)的时候，fixedTop != 0 这个时候继续执行let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0if (this.fixedTop === fixedTop) {return}this.fixedTop = fixedTop//继续执行，fixed上移this.$refs.fixed.style.transform = `translate3d(0, ${fixedTop}px, 0)`}

同时在scrollY的watch中计算diff

watch: {
·······scrollY(newY) {
......for (let i = 0; i < listHeight.length - 1; i++) {let height2 = listHeight[i + 1]if (-newY >= height1 && -newY < height2) {
......this.diff = height2 + newY}}},
······