首页分类导航区域

请求

async getNavList() {
	let {
		data: res
	} = await uni.$http.get('/api/public/v1/home/catitems')
	if (res.meta.status !== 200) {
		return uni.$showMsg()
	}
	this.navList = res.message
}

渲染分类导航的 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;
	}
}

绑定跳转切换页面