移动端-宫格导航

<!-- 宫格导航 -->
<view class="gongge-nav">`在这里插入代码片`
	<view class="nav-list">
		<view class="nav-item" v-for="(item, index) in navList" :key="index" @tap="gonggeNav(item)">
			<view>
				<!-- <image class="nav-image" :src="'/static/ok/nav/nav_ico' + (index + 1) + '.png'"></image> -->
				<image class="nav-image" src="/static/ok/nav/nav_ico1.png"></image>
			</view>
			<view class="nav-title">{{item.name}}</view>
		</view>
	</view>
</view>
<!-- 宫格导航-样式 -->
.gongge-nav {
	background: rgba(255, 255, 255, 1);
	box-shadow: 0px 3rpx 16rpx 0px rgba(0, 0, 0, 0.06);
	// border-radius:10rpx;
	margin-top: 36rpx;
	.nav-list {
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: row;
		.nav-item {
			width: 20%;
			display: flex;
			flex-direction: column;
			padding: 34rpx 0rpx;
			text-align: center;
			.nav-image {
				height: 80rpx;
				width: 80rpx;
			}
			.nav-title {
				word-break: break-all;
				display: -webkit-box;
				overflow: hidden;
				line-height: 1.5;
				text-overflow: ellipsis;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				font-size: 24rpx;
				font-family: PingFang SC;
				color: #222222;
				text-align: center;
			}
		}
	}
}
<!-- 宫格导航-数据结构 -->
navList: [
	{id: 1,name: '宫格导航1'},
	{id: 2,name: '宫格导航2'},
	{id: 3,name: '宫格导航3'},
	{id: 4,name: '宫格导航4'},
	{id: 5,name: '宫格导航5'},
],

<!-- 宫格导航-示例图片75*75 png格式 -->