uni-app 使用九宫格(uni-grid)布局组件

news2024/11/13 9:43:06

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2039808.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

出差学习笔记(1)汽车智能大灯一键标定功能

出差学习笔记&#xff08;1&#xff09;汽车智能大灯一键标定功能 今天看到了某公司制作的汽车智能大灯的一键标定功能&#xff0c;好奇&#xff0c;遂问之。 车前的两个大灯如何标定&#xff0c;我们可以将车辆开到一片墙前&#xff0c;将一些动态/静态图形打到墙上&#xff0…

Sublime Text常用快捷键大全

Sublime Text 是一款功能强大且广受欢迎的文本编辑器&#xff0c;其丰富的快捷键支持使得开发者能够更高效地编写和编辑代码。以下是 Sublime Text 中一些常用的快捷键&#xff0c;帮助你更加高效地使用这款工具&#xff1a; 功能分类快捷键 (Windows)快捷键 (Mac)新建文件Ctr…

Unity Shader变体优化与故障排除技巧

在 Unity 中编写着色器时&#xff0c;我们可以方便地在一个源文件中包含多个特性、通道和分支逻辑。在构建时&#xff0c;着色器源文件会被编译成着色器程序&#xff0c;这些程序包含一个或多个变体。变体是该着色器在满足一组条件后生成的版本&#xff0c;这通常会导致线性执行…

实验五之用Processing绘画

1.案例代码如下&#xff1a; import generativedesign.*; import processing.pdf.*; import java.util.Calendar; Tablet tablet; boolean recordPDF false; float x 0, y 0; float stepSize 5.0; PFont font; String letters "Sie hren nicht die folgenden Gesnge…

STM32寄存器点亮跑马灯

硬件状况 DS0灯接线方式 链路&#xff1a;3.3V --- DS0 --- LED0 --- PB5 | --- CPU 分析: PB5, 为高电平, 那么DS0灯 熄灭 PB5, 为低电平, 那么DS0灯 亮 PB5的配置 配置PB5引脚为输出模式, 输出高电平(灭), 输出低电平(亮)&#xff0c;配置为推挽输出 PB5 - GP…

前端开发攻略---图片裁剪上传的原理

目录 ​编辑 1、预览本地图片 2、图片裁剪交互 3、上传裁剪区域 1、预览本地图片 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initia…

面试必备:高频算法与面试题全面解析

干货分享&#xff0c;感谢您的阅读&#xff01; &#xff08;暂存篇---后续会删除&#xff0c;完整版和持续更新见高频面试题基本总结回顾&#xff08;含笔试高频算法整理&#xff09;&#xff09; 备注&#xff1a;引用请标注出处&#xff0c;同时存在的问题请在相关博客留言…

c++割圆法求圆周率

前言 上期的Python(加了turtle 所以带图片)割圆法点赞数量感人 但洛谷那期已经让我飞了 于是我准备掉点头发 以五升六之躯硬刚初三 这期请教了大量的高年级同学 把这个要用到九年级知识点的割圆法搞出来了 不要怕难 像我这样的xxs也能看懂 先声明 割圆法不一定要用循环 …

Open3D PCA法中特征值和特征向量中的关系及应用(原理详细版)

目录 一、概述 1.1定义 1.2特征值与特征向量的关系 1.3特征值和特征向量大小的关系 1.4在PCA法中的应用及实现步骤 二、特征值大小排序的意义 2.1排序的原因 2.2特征值大小及意义 2.3在PCA中的应用 2.4代码示例 三、特征值计算法向量 3.1评判标准 3.2原理 3…

虚拟人实时主持创意互动方案:赋能峰会论坛会议等活动科技互动感

随着增强现实、虚拟现实等技术的不断发展&#xff0c;“虚拟人实时主持”创意互动模式逐渐代替传统单一真人主持模式&#xff0c;虚拟主持人可以随时随地出现在不同活动现场&#xff0c;也可以同一时间在不同分会场中担任主持工作&#xff0c;在峰会、论坛、会议、晚会、发布会…

与LLMs进行在IDE中直接、无需提示的交互是工具构建者探索的一个有希望的未来方向

这个观点在卡内基梅隆大学与谷歌研究人员合作文章 《Using an LLM to Help With Code Understanding》 中提出。 论文地址&#xff1a;https://dl.acm.org/doi/abs/10.1145/3597503.3639187 摘要 理解代码非常具有挑战性&#xff0c;尤其是在新且复杂的开发环境中。代码注…

教程中对DTC(Data Transfer Object)的叙述有可改进之处

图 不 好&#xff0c;看 不 懂&#xff1b; 找 原 文&#xff0c;弄 清 楚。 翻 译 错&#xff0c;图 也 错&#xff1b; 改 几 字&#xff0c;加 一 图。 新 教 程&#xff0c;新 学 习&#xff1b; 新 体 验&#xff0c;从 未 有。

苹果(ios)私钥证书和profile文件申请教程

苹果&#xff08;ios&#xff09;私钥证书&#xff0c;可以理解为p12后缀的苹果证书&#xff0c;我们在苹果开发者中心可以生成cer格式的证书&#xff0c;然后使用mac电脑或者第三方转换成p12后缀格式的私钥证书。 证书profile文件&#xff0c;又叫描述文件&#xff0c;这个文…

无人机的电压和放电速率,你知道吗?

一、无人机电压 无人机电瓶多采用锂电池&#xff0c;其电压范围在3.7伏至44.4伏之间&#xff0c;具体取决于电池的单体电压和串联的电池节数。 单体电压&#xff1a;锂电池的单体电压通常为3.7V&#xff0c;但在满电状态下可能达到4.2V。 串联电池节数&#xff1a;无人机电瓶…

xxl-job定时任务同步点赞数据 + 内网穿透

1.xxl-job基本介绍 1.官方文档 https://www.xuxueli.com/xxl-job/ 2.gitee https://gitee.com/xuxueli0323/xxl-job 2.本地集成xxl-job 1.下载源码包 https://gitee.com/xuxueli0323/xxl-job/tree/6effc8b98f0fd5b5af3a7b6a8995bdcf30de69fc/ 2.导入到项目中 1.作为模…

【待修改】使用GraphRAG+LangChain+Ollama(LLaMa 3.1)知识图谱与向量数据库集成(Neo4j)

如何使用 LLama 3.1(一个本地运行的模型)来执行GraphRAG操作,总共就50号代码。 首先,什么是GraphRAG?GraphRAG是一种通过考虑实体和文档之间的关系来执行检索增强生成的方式,关键概念是节点和关系。 ▲ 知识图谱与向量数据库集成 知识图谱与向量数据库集成是GraphRAG 架…

121 买卖股票的最佳时机

解题思路&#xff1a; \qquad 这个题如果把每一种买卖的可能都算出来的解法时间复杂度在 O ( n 2 ) O(n^2) O(n2)&#xff0c;提交后会超时&#xff0c;所以需要在此基础上进行优化&#xff0c;能否通过一次遍历找出最大利润。 \qquad 对于当前点i&#xff0c;卖出股票所能得…

子域名下部署Java项目到docker中

场景&#xff1a;子域名需要部署Java项目&#xff0c;用于分公司的项目&#xff0c;可支持自定义功能。 拷贝总公司的后台代码 新增数据库并且修改配置环境的数据库连接 启动项目没问题后进行打包 目前我的是打成 jar包 服务器上创建文件&#xff0c;并且创建 dockerfile 文…

springboot整合activity7(一)

一、Spring Boot 集成 Activiti7&#xff08;工作流&#xff09; 此章节首先完成后端的activiti整合&#xff0c;生成工作流所需数据库表&#xff0c;数据库采用mysql。 二、依赖 <dependencies><!-- 引入Activiti7 --><dependency><groupId>org.ac…

080:vue+mapbox中interpolate 的详细解释

在Mapbox GL JS中,你可以使用样式表达式来实现数据驱动的样式,其中interpolate表达式是用于创建平滑过渡的一种方式。当你需要根据某个属性的值来动态地设置样式时,比如颜色、宽度或其他样式属性,interpolate表达式就非常有用。 文章目录 示例效果配置方式示例源代码(共14…