### axios、jsonp插件使用优化（Singer.vue）
场景：当很多组件都需要用到axios和jsonp的时候，可以考虑将axios和jsonp挂载到vue实例上。
原理：组价继承自实例，在实例里绑定的属性和方法在组件中能访问到。
原来的使用（仅在组件中引入和使用）：
引入：
import Axios from "axios";
使用：
axios.get(url,(err,data)=>{
console.log(err,data)
});
优化后：
1、在js的入口文件main.js中引入并挂载到vue的实例对象上：
①import Axios from "axios" import Jsonp from "jsonp" ②Vue.prototype.$axios=Axios Vue.prototype.$jsonp=Jsonp
注意：往函数上挂载是prototype，往对象上挂载是__proto__
2、组件中如何使用：
this.$axios.get(url,(err,data)=>{ console.log(err) }).then((data)=>{ console.log(data) });
或
this.$jsonp(url,{param:"jsonpCallback"},(err,data)=>{ console.log(err,data) });
注意：数据请求在created中请求
### 数据优化（Singer.vue）
optimizeData(data){ let singerData={ "hot":{ title:"最热", items:[] // 存放歌手信息 } } for(let i=0;i<data.length;i++){ // 剔除无效数据一：只保留data[i]中的Findex、Fsinger_mid、Fsinger_name、avatar。定义一个对象singerInfo，替代原来的data[i]添加到items中 let singerInfo={ Findex:data[i].Findex, Fsinger_mid:data[i].Fsinger_mid, Fsinger_name:data[i].Fsinger_name, avatar:`https://y.gtimg.cn/music/photo_new/T001R300x300M000${data[i].Fsinger_mid}.jpg?max_age=2592000` } if(i<20){ singerData.hot.items.push(singerInfo); } // 首字母，判断singerData中有没有key值为A的一项，有就往其中的items中追加data中属于A的数据；如果没有A，就创建temp为{title:A,items:[]}，再把属于A的数据添加进去。依次类推，到Z let Findex=data[i].Findex; if(singerData[Findex]){ singerData[Findex].items.push(singerInfo); }else{ let temp={title:Findex,items:[]}; temp.items.push(singerInfo); singerData[Findex]=temp; } } // 剔除无效数据二：声明hot和arrs数组分别存放热门和A-Z的数据，把其他的数据（title为9的数据等）剔除 let hot=[],arrs=[]; for (const key in singerData) { if(key=="hot"){ hot.push(singerData[key]) }else if(key.match(/[a-zA-Z]/)){ arrs.push(singerData[key]) } } // 首字母排序：根据title的Unicode编码排序 let newArr=arrs.sort((a,b)=>{ return a.title.charCodeAt()-b.title.charCodeAt(); }) // 返回出去 return hot.concat(newArr); }
### 在使用v-for的时候绑定的key值如果使用index，在某些情况下会耗费性能
### 利用computed计算属性过滤数据（Singer.vue）
场景：从singerList中拿出每个分类字母
computed: { slideData(){ let slideData=[]; for(let i=0;i<this.singerList.length;i++){ slideData.push(this.singerList[i].title); } return slideData; } },
### 功能：点击侧边栏进行跳转（Singer.vue）
better-scroll中实例的方法：scrollToElement()
使用步骤：
①先在页面中选中一个位置：<div ref="position"></div>
②然后在点击函数中跳转至该位置：this.BS.scrollToElement(this.$refs.position)
Singer.vue中使用：
①绑定点击事件，将点击的内容传过去：@click="jump(item)"
②绑定动态的DOM元素，目标位置用item中的title：:ref="item.title"
③使用scrollToElement()方法：
jump(item){ let targetDom=this.$refs[item][0]; this.BS.scrollToElement(targetDom); }
### 功能：点击侧边栏字母高亮（Singer.vue）
步骤：
①在data中声明一个active的初始值：active:"热门" 如果初始值为空，则点击前没有高亮显示
②为当前标签绑定一个class：
<span v-if="item=='热门'" :class="active===item?'active':''">热</span> <span v-else :class="active===item?'active':''">{{item}}</span>
③为元素绑定点击事件jump(item)，将当前的值赋给active：
jump(item){ this.active=item; }
### 功能：滚动侧边栏，列表跟着滚动（Singer.vue）
步骤：
1、先实现滚动时打印出当前滚动了几格子
①在ul上绑定touchstart事件和touchmove事件：
<ul class="slider" @touchstart="start" @touchmove="move">
②methods中：
start(e){ this.startY=e.touches[0].clientY; this.spanHeight=this.$refs.span[0].offsetHeight; console.log("开始",this.startY) }, move(e){ let moveY=e.touches[0].clientY; let distance=parseInt((moveY-this.startY)/this.spanHeight); console.log("移动",moveY,"几格子:"+distance) }
此时，拖动的距离会得到经过了几个span元素，distance就是下标。
2、将获得的下标转换为对应的字母，并调用jump()方法
move(e){ let moveY=e.touches[0].clientY; let distance=parseInt((moveY-this.startY)/this.spanHeight); let Findex=this.sliderData[distance]; this.jump(Findex); console.log("移动",moveY,"几格子:"+distance,"字母："+Findex) }
3、边界判断
if(distance>=this.sliderData.length){ distance=this.sliderData.length-1; }else if(distance<=0){ distance=0; }
4、此时有个bug，如果点击到H，向下移动会从 热门 开始向下移动，而不是从H开始
原因：let Findex=this.sliderData[distance];this.jump(Findex); 每次跳转的时候，都是根据distance来跳转，而这里的distance是移动过的距离，它是由moveY-this.startY得出，所以当点击到H时，多减了一部分距离。
解决：在获取Findex时，将多减去的距离（格子）加上
步骤：①在start()函数中声明：
this.startIndex=parseInt((this.startY-148)/this.spanHeight);
②在获取Findex时，distance要加上多减去的格子数：
distance=distance+this.startIndex; if(distance>=this.sliderData.length){ distance=this.sliderData.length-1; }else if(distance<=0){ distance=0; } let Findex=this.sliderData[distance];
### 功能：滚动列表，侧边栏高亮（Singer.vue）
1、拿到每个h2距离顶部的距离，放进数组：
distanceArr(){ let arr=[]; for(let i=0;i<this.sliderData.length;i++){ let y=this.$refs[this.sliderData[i]][0].offsetTop; arr.push(y); } this.arr=arr; }
2、执行：
watch: { sliderData(newValue,oldValue){ setTimeout(()=>{ this.distanceArr() },17)// 17ms？浏览器每分钟刷新60次，每次耗时0.017ms } },
3、better-scroll实例的scroll事件：
initBS(){ this.BS = new BS(this.$refs.wrapper,{ probeType:2// 在屏幕滑动的过程中实时的派发 scroll 事件 }); this.BS.on("scroll",(obj)=>{ let y=Math.abs(obj.y),activeIndex=""; for(let i=0;i<this.arr.length;i++){ if(y<=this.arr[i]&&y<this.arr[i+1]){ activeIndex=i; break; } } this.active=this.sliderData[activeIndex]; }); },
注意：①better-scroll的配置项 probeType:2
②对 obj.y 要取绝对值
4、边界判断，最后一个i不满足 y<=this.arr[i]&&y<this.arr[i+1] 的条件
if(i==this.arr.length-1){ activeIndex=i; }
### 列表页跳转到详情页（嵌套路由）（Singer.vue-->Detail.vue）
1、创建Detail.vue组件
2、路由表中注册，因为是嵌套在Singer.vue中的，所以在该路径下添加children：
{path:"/singer",name:"singer",component:Singer,children:[{
path:"detail",
component:Detail
}]},
3、Singer.vue中 router-view 开辟一块空间：
<router-view></router-view>
4、编程式导航跳转：
this.$router.push({path:"/singer/detail"});
5、动态路由传参：
①配置路由表：
改为
path:"detail",
path:"detail/:id",
②模板字符拼接参数：
this.$router.push({path:`/singer/detail/${id}`});
注意：better-scroll会阻止浏览器的原生click事件，在初始化的时候设置 click:true