引子
在之前的代码书写中，发现在切换类别的时候，页面更新特别慢，下面则需要对此进行改进。
1.改进加载页面的代码
这里主要在pages/index.vue页面中修改之前的loadContentByCategory函数，如下：
loadContentByCategory(favoriteId){
this.content.length = 0;
this.content = [];
api.getRecommendContentByProxy(favoriteId).then(result =>{
if(result.code === 10000){
this.content = result.data.tbk_dg_optimus_material_response.result_list.map_data;
}
})
}
2.添加缓冲页面
由于请求页面的过程中是需要时间的，这时可以在数据接收到之前，使页面缓冲一下。这里就是饿了吗UI框架了，修改原class为：'recommend-content-list-box'为id，并添加新的属性如下：
<div id="recommend-content-list-box" v-loading="loading">
在export default中添加一下内容：
data(){
return {loading:false}
},
// vue周期函数（页面出现之前）
mounted() {
let listBox = document.getElementById("recommend-content-list-box");
if (listBox){
listBox.style.minHeight = document.documentElement.clientHeight + 'px';
}
},
添加变量，以及控制加载页面的大小。
3 类别样式联动
现在页面点击各类别多时候虽然内容会有变化，但是类别的样式是没有变化的。修改export default对应函数如下：
// vue生命周期函数
async asyncData(){
console.log("test load data..");
let categoryResult = await api.getRecommendCategories();
// 数据返回状态码为10000表示获取数据成功
if (categoryResult.code === 10000){
// 获取分类商品列表
let currentId = categoryResult.data[0].favorites_id;
let contentResult = await api.getRecommendContent(currentId);
let titleArray = categoryResult.data[0].favorites_title.split('');
if (contentResult.code === 10000){
return {categories: categoryResult.data,
content: contentResult.data.tbk_dg_optimus_material_response.result_list.map_data,
currentCategory:titleArray.join('<em>/</em>'),
currentFavoriteId:currentId};
}
}else{
// TODO:错误处理
}
}
以及：
onCategoryItemClick(item){
this.currentFavoriteId = item.favorites_id;
this.currentCategory = item.favorites_title.split("").join("<em>/</em>");
// 加载内容
this.loadContentByCategory(item.favorites_id);
},
然后修改页面内容：
<li :class="item.favorites_id!==currentFavoriteId?'float-left':'float-left recommend-menu-active'" v-for="(item, index) in categories" :key="index"
@click="onCategoryItemClick(item)">
{{item.favorites_title}}
</li>
ok，大功告成。页面现在显示如下：
