小程序P103 09.首页-实现分类导航区域
1、 获取分类导航的数据
①定义 data 数据
②在 onLoad 中调用获取数据的方法
③在 methods 中定义获取数据的方法
示例代码如下：

export default {
data() {
return {
// 1. 分类导航的数据列表
navList: [],
}
},
onLoad() {
// 2. 在 onLoad 中调用获取数据的方法
this.getNavList()
},
methods: {
// 3. 在 methods 中定义获取数据的方法
async getNavList() {
const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
if (res.meta.status !== 200) return uni.$showMsg()
this.navList = res.message
},
},
}
2、渲染分类导航的 UI 结构
<!-- 分类导航区域 -->
<view class="nav-list">
<view class="nav-item" v-for="(item, i) in navList" :key="i">
<image :src="item.image_src" class="nav-img"></image>
</view>
</view>
通过如下的样式美化页面结构：
.nav-list {
display: flex;
justify-content: space-around;
margin: 15px 0;

.nav-img {
width: 128rpx;
height: 140rpx;
}
}