微搭低代码从入门到精通12-网格布局

news2024/10/2 1:21:23

开发小程序首要的就是考虑布局的问题,我们在以前的版本只能选择普通容器结合图片和文本组件来构建页面。

使用通用组件布局也可以,但有个问题是你要先学习CSS,要懂布局的概念,比如需要知道啥是flex布局,然后还得熟悉每个属性取啥值是啥效果。

要想熟练掌握CSS,一个要先学习相应的知识,另外一个就是要动手做。对于零基础的使用者来说,无疑提高了门槛。

最近更新的版本中新推出了一个布局组件,网格布局。使用起来就比较方便,本篇我们介绍一下网格布局的用法。

01 案例效果

在这里插入图片描述

02 布局拆解

一般我们看到一个布局就先要进行拆解,网格布局是用行和列来进行拆解的,我们可以看到我们要的效果可以拆解成一行两列。第一列放置一个文本组件,第二列放置一个图标组件。

还有就是下划线,下划线既可以使用组件也可以用边框实现,使用边框实现会比较紧凑,调整组件的高度时边框会自动进行调整。如果单独用分割线组件的话比较占空间,留白较多

03 搭建方法

先往页面中放置网格布局

在这里插入图片描述

如果调整列数量,会根据数字来自动添加或者删除多余的列组件,我们将列调整为2

在这里插入图片描述

目前这两列是横向平分,我们的效果是图标是在右边,我们选中第二列,将列宽度改为适应内容

在这里插入图片描述

然后分别给列组件添加文本组件和图标组件

在这里插入图片描述

修改文本组件的文字内容,改为最新推荐,设置文本格式为标题H6

在这里插入图片描述

图标的话选择向右的箭头

在这里插入图片描述

现在内容比较挤,可以给一些留白,留白通过设置边距来实现,给一定的外边距

在这里插入图片描述

下划线的话我们只需设置下边框即可

在这里插入图片描述

然后给一点内边距,让边框距离文字有一定的间隔

在这里插入图片描述

这样一个页面就搭建好了。经常有粉丝问,我是零基础的,我想学习这个工具开发产品可以么。

其实我建议以下几种类型的人学习这个工具,第一类是你本身就有一定的商业洞察力,已经发现了一些未满足的需求。那么你可以投入一些精力来学习,投入最小的成本来验证自己的商业想法是否可行。

第二类就是本身已经有一个经营起来的生意,可以用低码工具帮自己很好的运营你现有的生意,你也不指望用你产品的人给你付费或者通过广告来增加收入。

第三类就是身处企业的IT部门,本身企业就有一些信息化的需求,以前可能要借助乙方才能实现,现在可以快速搭建一下场景来满足企业的信息化需求。

因为现在低码工具也才处于普及阶段,有些零基础的希望学习低代码直接做低码开发工作,我建议如果你的财务压力不大,可以预研,如果比较大还是先学习传统开发比较好,后续等形成行业了再转入低码开发也不迟。

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

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

相关文章

分布式事务 | 使用DTM 的Saga 模式

DTM 简介前面章节提及的MassTransit、dotnetcore/CAP都提供了分布式事务的处理能力,但也仅局限于Saga和本地消息表模式的实现。那有没有一个独立的分布式事务解决方案,涵盖多种分布式事务处理模式,如Saga、TCC、XA模式等。有,目前…

【AI数学】相机成像之内参数

计算机视觉偏底层的工作会跟摄像机打交道,最近正好有接触,所以整理总结一下。 相机参数通常分为内参数、外参数,偶尔会有畸变参数等滤镜参数。 申明:本文图例均为原创,借用需附此文链接。 内参数:相机内部的…

[SSD固态硬盘技术 15] FTL映射表的神秘面纱

为什么需要映射表?固态硬盘的存储器件采用的是闪存[5],具有以下几个特点: (1)读写基本单位是以页(Page)为单位,擦除是以块(Block)为单位。

NFC概述摘要

同学,别退出呀,我可是全网最牛逼的 WIFI/BT/GPS/NFC分析博主,我写了上百篇文章,请点击下面了解本专栏,进入本博主主页看看再走呗,一定不会让你后悔的,记得一定要去看主页置顶文章哦。 原理来说,NFC和Wi-Fi类似,利用无线射频技术来实现设备间通信。NFC的工作频率为13.5…

基于c语言实现的对代码的同源性检测

完整代码:https://download.csdn.net/download/qq_38735017/87382389本次课程设计为了巩固上学期在软件安全课程上所学的安全知识,包括堆栈溢出、整数溢出等等,同时考察了一些课外的新事物,例如字符串匹配与CFG控制流程图的同源性…

Attention机制 学习笔记

学习自https://easyai.tech/ai-definition/attention/ Attention本质 Attention(注意力)机制如果浅层的理解,跟他的名字非常匹配。他的核心逻辑就是“从关注全部到关注重点”。 比如我们人在看图片时,对图片的不同地方的注意力…

为什么要在电子产品中使用光耦合器?

介绍 光耦合器不仅可以保护敏感电路,还可以使工程师设计各种硬件应用。光耦合器通过保护元件,可以避免更换元件的大量成本。然而,光耦合器比保险丝更复杂。光耦合器还可以通过光耦合器连接和断开两个电路,从而方便地控制两个电路…

【Markdown】markdown语法规定

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注…

Vue3 如何实现一个函数式右键菜单(ContextMenus)

前言: 最近在公司 PC 端的项目中使用到了右键出现菜单选项这样的一个工作需求,并且自己现在也在实现一个偶然迸发的 idea( 想用前端实现一个 windows 系统从开机到桌面的 UI),其中也要用到右键弹出菜单这样的一个功能,…

通讯录文件操作化

宝子,你不点个赞吗?不评个论吗?不收个藏吗? 最后的最后,关注我,关注我,关注我,你会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重…

几个chatGPT的难题,关于语言转换

不同语言代码的移植一直以来是程序员面临的难题,最近问了问chatGPT能否解决这个问题。编写一个程序,实现c语言函数转换为php函数答:这是一个非常困难的问题,因为两种语言的语法、结构和标准库都不相同。如果您希望完成这个任务&am…

MySql服务多版本之间的切换

从网上总结的经验,然后根据自己所遇到的问题合并记录一下,方便日后再次需要用到 MySql服务多版本同时运行 步骤 1、如果你电脑上已经有一个mysql版本,例如mysql-5.7.39-winx64,它占据了3306端口。此时如果你想下仔另一版本&…

活动星投票紫砂新青年制作一个投票活动

“紫砂新青年”网络评选投票_免费链接投票_作品投票通道_扫码投票怎样进行现在来说,公司、企业、学校更多的想借助短视频推广自己。通过微信投票小程序,网友们就可以通过手机拍视频上传视频参加活动,而短视频微信投票评选活动既可以给用户发挥…

6年自动化测试,终于进华为了,年薪25w其实也并非触不可及

我的职业生涯开始和大多数测试人一样,开始接触都是纯功能界面测试,第一份测试工作就是在电商公司做功能测试,工作忙忙碌碌,每天在各种业务需求学习和点点中度过,过了好几年发现自己还只是一个功能测试工程师&#xff0…

锐捷(十四)mpls vxn optionc的关键问题所在和具体问题分析

用锐捷的设备搭建mpls vxn optionc的基础版和带RR的版本,在控制平面和转发平免上分析mpls vxn optionc的关键问题所在和具体问题分析。一 基础mpls vxn optionc:核心:两pe之间之间建立MP EBGP邻居,从而直接传递路由解放了ASBR。关…

LeetCode-1223-掷骰子模拟

1、动态规划法 我们可以利用数组dp[i][j][k]dp[i][j][k]dp[i][j][k]来表示当我们已经投过iii次骰子,其中第iii次投出的骰子是jjj,此时连续投出骰子jjj的次数为kkk。因此我们可以根据上一轮中得到的状态dp[i−1][j][k]dp[i-1][j][k]dp[i−1][j][k]&#…

最小二乘支持向量机”在学习偏微分方程 (PDE) 解方面的应用(Matlab代码实现)

目录 💥1 概述 📚2 运行结果 🎉3 参考文献 👨‍💻4 Matlab代码 💥1 概述 本代码说明了“最小二乘支持向量机”在学习偏微分方程 (PDE) 解方面的应用。提供了一个示例&#xff0c…

加盟管理系统挑选法则,看完不怕被坑!

经营服装连锁店铺究竟有多难?小编已经不止一次听到身边的老板,抱怨加盟连锁店铺难以管理了,但同时呢,也听到了很多作为加盟商的老板,抱怨总部给的支持和管理不到位。服装加盟店铺管理,到底有哪些难点呢&…

BFS广度优先遍历——Acwing 844. 走迷宫

1.BFS简介我们可以将bfs当做一个成熟稳重的人,一个眼观六路耳听八方的人,他每次搜索都是一层层的搜索,从第一层扩散到最后一层,BFS可以用来解决最短路问题。2.基本思想从初始状态S开始,利用规则,生成所有可…

window11 安装node及配置环境变量

一、安装环境 本教程演示的环境: 系统:win 11 64位 node.js下载地址: http://nodejs.cn/ node.js版本:长期支持版本(本教程基于16.15.0) 点击选中图标下载到电脑本地即可。 二、安装步骤 1、双击安装包,一…