微搭低代码从入门到精通12-网格布局
创始人
2024-05-25 15:04:43
0

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

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

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

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

01 案例效果

在这里插入图片描述

02 布局拆解

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

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

03 搭建方法

先往页面中放置网格布局

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

图标的话选择向右的箭头

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

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

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

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

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

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

相关内容

热门资讯

前端-session、jwt 目录:   (1)session (2&#x...
linux入门---制作进度条 了解缓冲区 我们首先来看看下面的操作: 我们首先创建了一个文件并在这个文件里面添加了...
关于测试,我发现了哪些新大陆 关于测试 平常也只是听说过一些关于测试的术语,但并没有使用过测试工具。偶然看到编程老师...
前缀和与对数器与二分法 1. 前缀和 假设有一个数组,我们想大量频繁的去访问L到R这个区间的和,...
nodejs:本地安装nvm实... 一、背景-使用不同版本node的原因 vue3+ts、nuxt3版本,node...
JAVA集合知识整理 Java集合知识整理 HashMap相关 HashMap的底层数据结构:jdk1.8之...
无刷直流电机介绍及单片机控制实... 无刷直流电机介绍及单片机控制实例前言基本概念优势与劣势使用寿命基本结构使用单片机控制实例电子调速器&...
fwdiary(2) dp2 1.传纸条  AcWing 275. 传纸条 - AcWing 走两条路,走一条最大的...
常用的DOS命令 常用的DOS命令 DOS(Disk Operating System,磁...
<C++> 类和对象(下) 1.const成员函数将const修饰的“成员函数”称之为const成员函数,cons...