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

　　　　import Axios from "axios";

　　　　axios.get(url,(err,data)=>{
           console.log(err,data)
       });

　　　　①import Axios from "axios"
         import Jsonp from "jsonp"
       ②Vue.prototype.$axios=Axios
         Vue.prototype.$jsonp=Jsonp

 　　　　　　 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)
            });

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);
        }

    computed: {
        slideData(){
            let slideData=[];
            for(let i=0;i<this.singerList.length;i++){
                slideData.push(this.singerList[i].title);
            }
            return slideData;
        }
    },

            jump(item){
                let targetDom=this.$refs[item][0];
                this.BS.scrollToElement(targetDom);
            }

　　　　　　  <span v-if="item==‘热门‘" :class="active===item?‘active‘:‘‘">热</span>
            <span v-else :class="active===item?‘active‘:‘‘">{{item}}</span>

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

　　　　<ul class="slider" @touchstart="start" @touchmove="move">

                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)
                }

            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)
            }

            if(distance>=this.sliderData.length){
                distance=this.sliderData.length-1;
            }else if(distance<=0){
                distance=0;
            }

　　　　　　　　　　this.startIndex=parseInt((this.startY-148)/this.spanHeight);

                        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];

        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;
        }

        watch: {
            sliderData(newValue,oldValue){
                setTimeout(()=>{
                    this.distanceArr()
                },17)// 17ms？浏览器每分钟刷新60次，每次耗时0.017ms
            }
        },

        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];
            });  
        },

            if(i==this.arr.length-1){
                activeIndex=i;
            }

        {path:"/singer",name:"singer",component:Singer,children:[{
            path:"detail",
            component:Detail
        }]},

　　　　 <router-view></router-view>

　　　　 this.$router.push({path:"/singer/detail"});

　　　　path:"detail",

 　　　 path:"detail/:id",

　　　　this.$router.push({path:`/singer/detail/${id}`});