出差一个月,没带电脑,没有时间和精力学习,很是惭愧。赶紧补回来。
引子
前面已经书写到发现页的内容了,先别就是将其中第一个选项,即:推荐的内容展示到最中间。
代码
获取推荐数据
<script>
import api from "../../utils/api";
export default {
name: "index",
async asyncData(){
let categoriesResult = await api.getCategories();
if (categoriesResult.code === api.SUCCESS_CODE) {
// 拿推荐内容
let categoriesList = categoriesResult.data;
let recommendItem = categoriesList[0]; // 第一个数据就是推荐内容
let currentCategoryId = recommendItem.id;
let contentResult = await api.getCategoriesContent(currentCategoryId, 1);
if (contentResult.code === api.SUCCESS_CODE){
return {
currentCategoryId,
categoriesList,
contentList: contentResult.data
}
}
}
},
}
</script>
接着就是修改当页面打开时,默认选择为推荐类别的样式,如下:
<li :class="currentCategoryId===item.id?'discovery-category-active':''" v-for="(item, index) in categoriesList" :key="index" >
<span v-text="item.title" ></span>
</li>
和
.discovery-category-active{
color: #fff;
background: #ff4500;
}