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 为例。

javascript 复制代码
<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 导入组件、再开始开发。(完)

相关推荐
小徐_23332 天前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
ygria2 天前
样式工程化:如何实现Design System
前端·前端框架·前端工程化
iOS阿玮2 天前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw53 天前
uni-app中v-if使用”异常”
前端·uni-app
!win !3 天前
uni-app中v-if使用”异常”
前端·uni-app
2501_915918413 天前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张3 天前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
java水泥工3 天前
基于Echarts+HTML5可视化数据大屏展示-白茶大数据溯源平台V2
大数据·echarts·html5
00后程序员张3 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
2501_918126913 天前
用html5写一个flappybird游戏
css·游戏·html5