uni-app实战笔记

news2024/10/7 14:32:21

3 页面跳转
点击【成员列表】进入到子页面,这里就涉及到页面跳转。
2
路由是基础并不难,但是路由跳转的方式比较灵活,这里就需要记录一下。有一点是需要配置的,就是在pages.json中需要将路由整理好,否则页面是无法跳转的
2
第一种配置方法,是在uni-list-item中配置相对路径的字符串。
2
第二种方法是根据api进行页面跳转
在这里插入图片描述

2 九宫格
这里使用深度选择器,调整字体居中的位置

<template>
	<view class="uni-container">
		<uni-grid :column="3">
			<uni-grid-item>
				<text>性格</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>婚姻</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>子女</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>父母</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>福德</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>疾厄</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>财帛</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>官禄</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>兄弟</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>朋友</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>相貌</text>
			</uni-grid-item>
			<uni-grid-item>
				<text>才华</text>
			</uni-grid-item>
		</uni-grid>
		<uni-fab horizontal="right" vertical="bottom" direction="vertical"></uni-fab>
	</view>
</template>

<script>
</script>

<style>
	:deep(.uni-grid-item__box){
		flex: 1;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
</style>

1 主菜单
主菜单在pages.json中配置对应的json即可,有几个页签配置几个
2

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

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

相关文章

Hive架构原理以及部署教程

◆了解Hive架构原理 ◆了解Hive和RDBMS的对比 Hive架构原理 Hive架构原理 - 知乎 Hive 是基于 Hadoop 的数据仓库工具&#xff0c;它提供了类 SQL 查询语言 HQL&#xff08;Hive Query Language&#xff09;&#xff0c;可以将 SQL 语句转化为 MapReduce 任务进行数据处理。 Hi…

【软考备战·希赛网每日一练】2023年5月2日

文章目录 一、今日成绩二、错题总结第一题 三、知识查缺 题目及解析来源&#xff1a;2023年05月02日软件设计师每日一练 一、今日成绩 二、错题总结 第一题 解析&#xff1a; 三、知识查缺 复习 流水线技术。序列图&#xff08;顺序图&#xff09;用于展现系统中一个用例和多…

剪枝与重参第九课:DBB重参

目录 DBB重参前言1. DBB2. DBB的六种变换2.1 Transform I: a conv for conv-BN2.2 Transform II&#xff1a;a conv for branch addition2.3 Transform III&#xff1a;a conv for sequential convolutions2.4 Transform IV&#xff1a;a conv for depth concatenation2.5 Tran…

【SpringBoot】 整合RabbitMQ 消息单独以及批量的TTL

生产者端 目录结构 导入依赖 修改yml 业务逻辑 队列消息过期 消息单独过期 TTL&#xff08;Time To Live&#xff09;存活时间。表示当消息由生产端存入MQ当中的存活时间&#xff0c;当时间到达的时候还未被消息就会被自动清除。RabbitMQ可以对消息单独设置过期时间也可以对…

爬虫 - QS世界大学排名数据

爬虫 - QS世界大学排名数据 网站简介爬虫方法概述使用工具爬虫概述 第一部分导入需要用到的python包设置selenium控制浏览器打开网页控制鼠标操作定位节点 提取数据滚轮翻页构建循环自动爬取数据数据储存 第二部分导入需要用到的python包获取网页设置请求头读取链接获取网页信息…

TIM-定时器——STM32

TIM-定时器——STM32 TIM(Timer)定时器 定时器可以对输入的时钟进行计数&#xff0c;并在计数值达到设定值时触发中断 16位计数器、预分频器、自动重装寄存器的时基单元&#xff0c;在72MHz计数时钟下可以实现最大59.65s的定时 不仅具备基本的定时中断功能&#xff0c;而且还包…

K8S第二讲 Kubernetes集群简易版搭建步骤

Kubernetes集群搭建步骤 1&#xff1a;准备物理或虚拟机器 为Kubernetes集群准备物理或虚拟机器。至少需要一个控制节点&#xff08;Master Node&#xff09;和一个工作节点&#xff08;Worker Node&#xff09;&#xff0c;建议使用Linux操作系统。 2&#xff1a; 安装Dock…

1987-2021年全国各省进出口总额数据含进口总额和出口总额

1987-2021年全国各省进出口总额数据含进口和出口 1、时间&#xff1a;1987-2021年 2、范围&#xff1a;包括全国30个省不含西藏 3、指标&#xff1a;进出口总额、进口总额、出口总额 4、单位&#xff1a;万美元 5、来源&#xff1a;各省NJ、JIN rong统计NJ 6、缺失情况说…

递归算法及经典例题详解

大部分人在学习编程时接触的第一个算法应该就是递归了&#xff0c;递归的思想其实很好理解&#xff0c;就是将一个问题拆分为若干个与本身相似的子问题&#xff0c;通过不断调用自身来求解。 但很多新手在实际操作中却很难正确使用到递归&#xff0c;有时面对问题还会有种无从…

win7下java环境搭建以及jdk环境变量配置

很多人在搭建页游、手游时候经常遇到JAVA闪退,基本都是环境变量或者路径错误导致的。本章节主要讲解在win7系统环境下,java环境变量配置方法,java环境配置正确,才可以对apk程序进行反编译运行页游手游。其他操作系统环境变量大同小异参考下就会了。 安装教程: 1、直接运…

让语言学习更简单的 WordFlow

作为一个英语并不是那么特别好的计算机专业学生&#xff0c;长期积累英语的学习对个人发展还是有意义的。简单来说&#xff0c;我在语言上最大的两个问题&#xff0c;一个自己「不理解」&#xff0c;另一个是自己「不会表达」。 上述两个问题主要体现在口语层面&#xff0c;而…

1997-2021年全国30省技术市场成交额(亿元)

1997-2021年全国30省技术市场成交额 1、时间&#xff1a;1997-2021年 2、范围&#xff1a;30省不含西藏 3、来源&#xff1a;国家统计J 4、指标&#xff1a;技术市场成交额 5、缺失情况说明&#xff1a;无缺失 6、指标解释及用途&#xff1a; 技术市场成交额是一个客观、…

YOLOv5 训练自己的数据集

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客 &#x1f356; 原作者&#xff1a;K同学啊|接辅导、项目定制 ● 难度&#xff1a;夯实基础⭐⭐ ● 语言&#xff1a;Python3、Pytorch3 ● 时间&#xff1a;5月1日-5月6日 &#x1f37a;要求&#xff1…

基于C#开发 B/S架构的实验室管理系统 云LIS系统(MVC + SQLserver + Redis)

一、云LIS系统是将各种样本、免疫、临检、放免、及实验用的分析仪器&#xff0c;通过网络管理和传输实验分析过程中全部数据。对每一专业&#xff0c;实现检验申请、样本采集、样本核收、联机检验、质量控制、报告审核到报告发布的全环节的信息化管理平台。 二、基于B/S架构的云…

【SpringMVC】| SpringMVC注解式开发

目录 一&#xff1a;SpringMVC注解式开发 1. RequestMapping定义请求规则 2. 五种数据提交的方式 3. 请求参数中文乱码解决 4. action方法的返回值 5. SpringMVC的四种跳转方式 6. SpringMVC支持的默认参数类型 7. 日期处理 8. 标签的使用 9. 资源在WEB-INF目录下 一…

常见三种编码方式

常见三种编码方式 1. one-hot 编码2. 虚拟编码3. 效果编码 最近复习一些书&#xff0c;记录一下。在特征工程中&#xff0c;数据集经常会出现分类变量&#xff0c;这时候的分类变量可能是字符型&#xff0c;通常不能直接用于训练模型&#xff0c;这时需要对分类变量进行编码&am…

JavaWeb《CSS》

本笔记学习于Acwing平台 目录 1. 样式定义方式 2.1 行内样式表&#xff08;inline style sheet&#xff09; 2.2 内部样式表&#xff08;internal style sheet&#xff09; 2.3 外部样式表&#xff08;external style sheet&#xff09; 2. 选择器 2.1 标签选择器 2.2 …

ChatGPT服务器配置部署-chatGPT国内入口搭建

chatGPT国内入口 ChatGPT是由OpenAI公司开发的一种自然语言生成模型&#xff0c;国内入口一般是通过API接口或者SDK对接实现的。具体的对接方式可以参考以下步骤&#xff1a; 了解ChatGPT的API接口或者SDK: 首先需要了解ChatGPT提供的API接口或者SDK&#xff0c;包括使用方式、…

文件上传漏洞靶场

目录 第一关 源码 前端 后端 代码审计 前端 后端 绕过原理 抓包后未修改 抓包后修改且文件上传成功 第二关 源码 后端 代码审计 绕过原理 抓包后未修改 抓包后修改且文件上传成功 ​编辑 第三关 源码 后端 代码审计 绕过原理 第四关 源码 后端 代码审…

linux以太网(二)

内核版本&#xff1a;linux-3.14.16 基于imx6 一、文件fec_main.c分析 路径&#xff1a;drivers\net\ethernet\freescale\fec_main.c 1、platform总线 标准的平台总线使用方式 设备树匹配 设备树节点 2、平台总线probe 1&#xff09;分配net_device相关结构 分配 与平…