caimei-applets-caimei/components/module/home/navigationTab.vue

<template name="navigation">
	<!-- 自定义分类导航栏 -->
	<view class="tabbar clearfix">
		<view class="cate-item" v-for="(nav,idx) in navList" :key="idx" @click="navToListPage(nav)">
			<image :src="nav.classifyImage"></image>
			<text>{{nav.classifyName}}</text>
		</view>
	</view>
</template>

<script>
	var self; 
	export default{
		name:'navigation',
		props:{
		    navList: { // 由父页面传递的数据
				type: Array,
				value: [],
		    },

		},
		data() {
			return{
				
			}
		},
		created() {
			// console.log(this.navList);
		},
		onLoad(){
			
		},
		methods:{
			navToListPage(nav){
				this.$api.navToListPage({type:'商品分类',value:nav.classifyName,id:nav.id});
			}
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">
	.tabbar{
		margin-bottom: 26rpx;
	}
	.cate-item {
		width: 118rpx;
		margin-right:28rpx;
		margin-bottom:28rpx;
		display: flex;
		float: left;
		flex-direction: column;
		align-items: center;
		font-size: $font-size-26;
		color: $text-color;
		line-height: 36rpx;
		&:last-child{
			margin-right: 0;
		}
		&:nth-child(5n){
			margin-right: 0;
		}
		image {
			width: 90rpx;
			height: 90rpx;
			margin-bottom: 8rpx;
		}	
	}
</style>