uni-app 使用九宫格（uni-grid）布局组件

1、运行环境

开发工具为 HBuilder X 4.23, 操作系统为 Windows 11。Vue.js 版本为 3.

2、操作步骤

首先，登录 HBuilder X。然后用桌面浏览器，访问官网组件网址。

https://ext.dcloud.net.cn/plugin?name=uni-grid

在组件网址右上角、点击"下载插件并导入 Hbuilder X"。

此时网址有可能提示再次登录 HBuilder X 账号。完成登录后、在浏览器弹窗点击"打开 HBuilder X"。

此时 HBuilder X 会弹窗供选择将该组件导入到哪个项目。完成选择并确认后、下方的控制台会输出内容、此时便是完成组件注册。

3、代码示例

我们的代码在一个 .vue 文件中，以 menu.vue 为例。

<template>
	<view class="warp">
		<!-- 宫格 -->
		<view class="example-body">
			<uni-grid :column="3" :highlight="true" @change="onClickChange">
				<uni-grid-item :index="i" :key="i" v-for="(menuStub,i) in gridList">
					<view class="grid-item-box" style="background-color: #fff;">
						<!-- <image :src="'/static/grid/c'+(i+1)+'.png'" class="image" mode="aspectFill" /> -->
						<!--text class="big-number">{{i+1}}</text-->
						<text class="text">{{menuStub.mName}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 固定的菜单示例
				gridList: [{mName:'点检填报'},{mName:'保养填报'},{mName:'点检记录'},{mName:'保养记录'},{mName:'e'},{mName:'f'}]
			}
		},
		methods: {
			onClickChange(e){
				console.log("点击的位置为:",e.detail.index);
				//begin 判断跳转
				
				//end 判断跳转
			}
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100%;
		height: auto;
	}
	view {
		font-size: 14px;
		line-height: inherit;
	}
	.example-body {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14px;
		background-color: #ffffff;
		flex-wrap: wrap; /* add 240813 */
	}
	
	.section-box{
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
	}
	.decoration{
		width: 4px;
		height: 12px;
		border-radius: 10px;
		background-color: #2979ff;
	}
	.section-text{
		color: #333;
		margin-left: 15rpx;
	}

	.warp {
		background-color: #fff;
	}

	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.image {
		width: 50rpx;
		height: 50rpx;
	}
	
	.big-number{
		font-size: 50rpx;
		font-weight: 700;
		font-stretch: condensed;
		font-style:oblique;
	}
	
	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	.example-body {
		display: block;
	}

	.grid-item-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.grid-item-box-row {
		flex: 1;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.banner-image {
		width: 750rpx;
		height: 400rpx;
	}

	.swiper-box {
		height: 400rpx;
	}

	.search-icons {
		padding: 16rpx;
	}

	.search-container-bar {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		right: 0;
		z-index: 10;
		background-color: #fff;
	}

	::v-deep
	.uni-searchbar__box {
		border-width: 0;
	}

	::v-deep
	.uni-input-placeholder {
		font-size: 28rpx;
	}
</style>

4、总结

记得先在 HBuilder X 导入组件、再开始开发。（完）