微搭低代码从入门到精通10-tab栏组件

news2024/11/17 8:25:02

在小程序中,如果你的页面是由多个组成的,往往涉及到页面切换的问题。那如何引导用户访问不同的页面呢?微搭中提供了tab栏组件来实现这个功能,本篇我们介绍一下这个组件的使用方法。

首先呢打开我们的应用编辑器,在左侧的组件区域找到tab栏组件,将组件拖入到页面编辑区

在这里插入图片描述

研究一个组件的用法通常包含三个部分内容,属性、样式和事件

tab栏组件的布局模式一共是分成三种图文的,只有图标的,只有文字的

在这里插入图片描述

通常为了提供程序功能的辨识度,我们选择第一种图标+文字的模式

涉及到图标的就需要有设计师参与,由设计师来完成图标的制作,我们作为开发人员只需要把提供好的资源上传即可

但通常我们一个是没有对应的预算,另外可能也找不到会这项技能的人。可以在互联网搜索一下免费的资源库。我比较喜欢使用的就是iconfont,里边有免费的素材可以下载

在这里插入图片描述

选择好图标后,我们通常需要下载两种颜色的素材,一种是选中后的效果一种是未选中的效果

至于需要哪种颜色,通常需要学习一定的配色知识。我经常说技术和艺术是相通的,要想做好小程序,也是需要有一点美术的功底,不见得我们自己做出好看的图标来,但是把颜色搭配好也是必须的。

当你将素材下载好之后,我们就可以将素材上传到微搭里。微搭提供了素材管理的功能,在我们应用编辑器的左侧导航栏找到素材的图标,进行上传

在这里插入图片描述

tab栏组件的菜单内容需要在标签列表里维护

在这里插入图片描述

如果你的功能是固定的,那么可以直接点击某个标签进行修改

在这里插入图片描述

默认是从图标库里选择图标,我们也可以使用自己的素材,点击内置样式,我们切换成自定义模式

在这里插入图片描述

切换到自定义模式后就可以从素材库里直接选择素材了

在这里插入图片描述

颜色搭配上我们通常选中选择一些亮色,未选中选择一些暗色。tab栏组件默认点击图标的时候可以跳转到相应的页面,这里跳转到需要选择对应的页面。

在页面跳转时候还可以携带参数,通常我们的底部导航不建议携带参数,从产品规划上你不同的菜单是不同的业务,并不需要先从上一个页面选中某个参数带入到下一个页面中。

还有就是组件初始化后需要选中一个页面,我们通常都选择首页

在这里插入图片描述

还有就是菜单的文字也需要设置对应的颜色,通常是在高级属性中进行设置

在这里插入图片描述

一般我们的tab栏组件只是用来切换功能使用,很少设置change事件

总体上看,tab栏组件的使用还是非常简单的,只需要设置一些基本的属性即可。难点是在设计上,如果设计出好看和实用的图标,还有颜色要和你的小程序的整体风格相符合。

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

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

相关文章

OJ刷题Day2 · 判断根结点是否等于子结点之和 · 删除有序数组中的重复项 · 合并两个有序链表 · 数组中的第K个最大元素(中等题)

一、判断根结点是否等于子结点之和二、删除有序数组中的重复项三、合并两个有序链表四、数组中的第K个最大元素(中等题)一、判断根结点是否等于子结点之和 给你一个 二叉树 的根结点 root,该二叉树由恰好 3 个结点组成:根结点、左…

SpringBoot + kotlin/java + Mybatis-Plus +Sqlite + Gradle多模块项目

前言 我自己的业务项目,先用kotlinspringboot 搭建, 发现gradle支持kts脚本,于是我就搭建试试。我就选用了最流行的Sqlite内嵌数据库,虽然H2也不错,但是Sqlite才是最流行的。orm框架我还是选择了Mybatis-Plus ,为此中…

Spring Boot的创建和使用

目录 一、Spring Boot介绍 1.1 Spring Boot 是什么 1.2 Spring Boot的优点 二、Spring Boot 项目的创建 2.1 使用idea创建 2.1.1 安装Spring Boot Helper插件 2.1.2 创建 Spring Boot 项目 2.1.3 验证项目是否创建成功 2.2 使用网页创建 三、输出 hello world 一、S…

前端如何提升To B产品用户体验

云计算产品发展的早期常以技术为核心吸引客户,功能的实现是这一时期产品优先考虑的因素。经过数十年的发展,云计算行业已经进入了深耕细作的时代,市场的激烈竞争与云产品快速发展的同时,用户对产品的可用性与易用性也有了更高的要…

交换机中的冗余链路管理

一 交换机冗余链路许多交换机或交换机设备组成的网络环境中,通常使用一些备份连接,以提高网络的健全性,稳定性。备份连接也叫备份链路,冗余链路等。为了解决共享式局域网的碰撞问题,采用了交换机构成的交换式局域网&am…

C语言静态库、动态库的封装和注意事项

1、动态库、静态库介绍 参考博客:《静态库和动态库介绍以及Makefile》; 2、代码目录结构和编译脚本 参考博客:《实际工作开发中C语言工程的目录结构分析》; 3、编写库的流程 (1)明确需求:需求是否合理、需求的使用场景、需求可能遇…

chatgpt:人工智能的一次突破,如何正确的创建用户及使用

Chatgpt的正确创建及使用 chatgpt最近在国内也开始有声音了,其实早在去年12月初,该网站就已经可以在国外进行使用,而且很快渗透到了国外各行各业各个年龄段 ,最火的当属国外很多学生用它来生成论文,关键是语句通顺&am…

如何开启多个独立Chrome浏览器

一、简介 作为测试或者开发人员,有些情况下会用到 Chrome 浏览器,但有时是同一个 Chrome 浏览器无法为我们提供隔离开的不同环境。这样 我们就需要清理 cache 、切换账号等,降低了我们的工作效率。今天的主题是如何开启多个独立的 Chrome 浏…

LayUI模板引擎渲染数据

前端模板引擎介绍 接上节Spring boot项目开发实战——(LayUI实现前后端数据交换与定义方法渲染数据) 模板引擎能简化开发,极大提高效率,小编之前使用过JSP和Thymeleaf,以及python的jinja2,这些是后端的模…

spring(二)-----------如何注入bean

我们从第三方框架mybatis为引,看看如何往spring中注入一个bean 1、纯mybatis开发生成一个mapper对象 如果不使用spring的情况下,mybatis想生成一个mapper对象大概需要做下面的操作: 假设我们有了一个TMapper接口,此时获取该map…

12款开源数据资产(元数据)管理平台选型分析(三)

如上,是ChatGPT的百度指数和微信指数,继2022年12月上旬技术圈火热之后,因为微软、谷歌等巨头的推广加持,ChatGPT成为全球大众热源的话题。各大媒体都在消费这波舆论红利,打开微信公众号,劈天盖地各种姿势的…

前后端学习

最近和锴哥想搞一下前后端接口的事儿,但是不会,所以打算再学学前后端的基础知识,之后好抄作业,做缝纫机;达哥觉得我浮躁,这次一定要支棱起来;这次开始,面向openai学习。 前后端学习1…

ChatGPT (可能)是怎么炼成的

学习自李宏毅老师的课https://www.youtube.com/watch?ve0aKI2GGZNg 1.学习文字接龙 学习方式 GPT只需要在网上阅读大量的句子,不需要人工标注即可学习到大量句子接龙的知识 然而实际上,“你好”后面可以接的字有很多。实际上,GPT学的就是…

3、Go基础数据类型

目录一、Go数据类型二、字符串三、强制类型转换一、Go数据类型 基础数据类型 类型长度(字节)默认值说明bool1falsebyte10uint8,取值范围[0,255]rune40Unicode Code Point, int32int, uint4或8032 或 64 位,取决于操作系统int8, uint810-128 ~ 127, 0 ~…

Freemarker介绍

2. Freemarker介绍 FreeMarker 是一个用 Java 语言编写的模板引擎,它基于模板来生成文本输出。FreeMarker与 Web 容器无关,即在 Web 运行时,它并不知道 Servlet 或 HTTP。它不仅可以用作表现层的实现技术,而且还可以用于生成 XML…

Python数据结构:概念、栈

1.概念 数据结构是指相互之间存在着一种或多种关系的数据元素的集合和该集合中数据元素之间的关系组成。简单来说,数据结构就是设计数据以何种方式组织并存储在计算机中。 比如:列表、集合与字典等都是一种数据结构。 N.Wirth:“程序数据结构算法’ 2.分类 数据结…

基于comsol软件弯曲单模光纤模拟仿真

在本节中,主要基于实验室实际光纤单模圆柱光纤进行模拟,与comsol案例库文件在分析过程和建模有些差异: 模拟主要通过以下三个步骤进行:模型的几何构建、物理场的添加研究、结构处理分析来进行。 下面是第一步骤:几何…

unity2022.1.8之后版本的新的输入行为控制对象变化

文章目录unity2022.1.8之后版本的新的输入行为控制对象变化怎么导入?如何使用?unity2022.1.8之后版本的新的输入行为控制对象变化 我们先了解大概的逻辑。我们要设置触发行为的方式并且让他和对象的行为绑定,再将行为和对象绑定,…

SpringBoot开发规范部分通用模板+idea配置【项目通用-1】

SpringBoot开发规范通用模板 1 分页插件使用 通过MybatisPlus配置分页插件拦截器 Configuration MapperScan("com.xuecheng.content.mapper") public class MybatisPlusConfig {//定义分页的拦截器Beanpublic MybatisPlusInterceptor getMybatisPlusInterceptor() {…

Pascal版本的 - freopen

参数 filename -- 这是包含要打开的文件的名称的字符串。 mode -- 这是包含文件访问模式的字符串。它包括 - 高级编号模式&说明1个 “r” 打开文件进行读取。该文件必须存在。 2个 “w” 创建一个用于写入的空文件。如果已存在同名文件,则删除其内容并将该文件…