vue07----axios、jsonp插件使用优化、数据优化、过滤数据、点击右侧边栏进行跳转、点击侧边栏字母高亮、侧边栏控制列表滚动、滚动列表侧边栏高亮、嵌套路由列表至详情

### 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[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()

 

    使用步骤：

        ①先在页面中选中一个位置：

        ②然后在点击函数中跳转至该位置：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：

　　　　　　  if="item=='热门'" :class="active===item?'active':''">热
            else :class="active===item?'active':''">{{item}}

        ③为元素绑定点击事件jump(item)，将当前的值赋给active：

            jump(item){
                this.active=item;
            }

 

### 功能：滚动侧边栏，列表跟着滚动（Singer.vue）

    步骤：

        1、先实现滚动时打印出当前滚动了几格子

            ①在ul上绑定touchstart事件和touchmove事件：

            ②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

            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 开辟一块空间：

    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