vue07----axiosjsonp插件使用优化数据优化过滤数据点击右侧边栏进行跳转点击侧边栏字母高亮侧边栏控制列表滚动滚动列表侧边栏高亮嵌套路由列表至详情
Posted 吴小明
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue07----axiosjsonp插件使用优化数据优化过滤数据点击右侧边栏进行跳转点击侧边栏字母高亮侧边栏控制列表滚动滚动列表侧边栏高亮嵌套路由列表至详情相关的知识，希望对你有一定的参考价值。
### 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
以上是关于vue07----axiosjsonp插件使用优化数据优化过滤数据点击右侧边栏进行跳转点击侧边栏字母高亮侧边栏控制列表滚动滚动列表侧边栏高亮嵌套路由列表至详情的主要内容，如果未能解决你的问题，请参考以下文章
一次vue-cli 2.x项目打包优化经历（优化xlsx插件）
vue预渲染插件 prerender-spa-plugin（seo优化，生成多页面）
Vue打包上线webpack优化插件开启gzip-减少包的大小