博客
关于我
腾讯低代码(lowcode)行列布局
阅读量:392 次
发布时间:2019-03-05

本文共 976 字,大约阅读时间需要 3 分钟。

目录

本节我们介绍一下在小程序开发中特别常用的功能,布局。介绍了布局的概念和使用方法。

什么是布局

布局是在网页或者移动端开发的一个常见的技术概念,它指的是页面的结构,我们可以把布局理解为在word中的表格,表格分为行和列,在行和列中又可以放置不同的元素,其实日常中有很多场景,我们只要找一些场景的场景分析一下就可以,比如我经常喜欢看腾讯网,那么我们就分析一下腾讯网首页的布局。

在这里插入图片描述
如果我们用布局的思维就可以用网格线标一下
在这里插入图片描述
标好之后我们可以分析一下,他其实是四行布局,前三行都是一行一列布局,到了第四行的时候是一行三列布局

低代码中的布局组件

低代码码中也有行列布局,行代表Row,列代表Col。但是手机屏幕比较小,每一列占多少像素呢?为了简便,低代码中把页面的宽度定义为12,可以具体设置每一列的宽度,而且可以设置列的宽度

在这里插入图片描述

实战

我们今天使用布局组件实现一个教师列表的展示信息,内容包含教师的图片,教师的名称,教师的编号,教龄,所教科目,所属地区等信息。

我们先放置一行,点击row组件
在这里插入图片描述
刚了解的网友可能要问,这个空插槽是什么意思,其实打个形象的比方它就像我们电脑的主板一样,上面有很多插槽,可以插内存条。插槽就代表这个组件是容器,可以放置其他的组件。
我们在组件树选中Row的Slot插槽,然后增加两个col组件
在这里插入图片描述
第一个col我们在插槽增加image组件,设置方法同上。
在这里插入图片描述

默认图片的大小是占满屏幕,我们可以设置一下图片的大小,在组件树上选中image组件,然后切换到样式标签,设置一下宽和高

在这里插入图片描述
选中第二行的slot插槽,增加三个row组件
在这里插入图片描述
然后每个row增加一个col组件
在这里插入图片描述
最后在每一列中放置text组件来表示具体的信息
在这里插入图片描述
组件添加完成之后就需要设置col的布局,我们先设置最外边的两列,第一列的class属性选择col-3,第二列的class属性选择col-9
在这里插入图片描述
在这里插入图片描述
设置好后可能不是你需要的效果,调样式的技巧就是打开元素的边框,然后看为啥没占满,比如打开col组件的边框,设置方法是在样式中打开边框的配置,选择实线,然后选择颜色为黑色,设置边框的宽度为1
在这里插入图片描述
边框一打开你就明白了,剩下的细节就需要仔细调整了,我们现在的问题是列里增加了三行,期望的效果是从上到下排列,但是却挤到了一起,所以需要设置一下列的布局模式,修改为flex布局,然后主轴设置为垂直就好了
在这里插入图片描述

转载地址:http://zibzz.baihongyu.com/

你可能感兴趣的文章
logstash mysql 准实时同步到 elasticsearch
查看>>
Luogu2973:[USACO10HOL]赶小猪
查看>>
mabatis 中出现< 以及> 代表什么意思?
查看>>
Mac book pro打开docker出现The data couldn’t be read because it is missing
查看>>
MAC M1大数据0-1成神篇-25 hadoop高可用搭建
查看>>
mac mysql 进程_Mac平台下启动MySQL到完全终止MySQL----终端八步走
查看>>
Mac OS 12.0.1 如何安装柯美287打印机驱动,刷卡打印
查看>>
MangoDB4.0版本的安装与配置
查看>>
Manjaro 24.1 “Xahea” 发布!具有 KDE Plasma 6.1.5、GNOME 46 和最新的内核增强功能
查看>>
mapping文件目录生成修改
查看>>
MapReduce程序依赖的jar包
查看>>
mariadb multi-source replication(mariadb多主复制)
查看>>
MariaDB的简单使用
查看>>
MaterialForm对tab页进行隐藏
查看>>
Member var and Static var.
查看>>
memcached高速缓存学习笔记001---memcached介绍和安装以及基本使用
查看>>
memcached高速缓存学习笔记003---利用JAVA程序操作memcached crud操作
查看>>
Memcached:Node.js 高性能缓存解决方案
查看>>
memcache、redis原理对比
查看>>
memset初始化高维数组为-1/0
查看>>