博客
关于我
腾讯低代码(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/

你可能感兴趣的文章
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>
Mysql 数据库重置ID排序
查看>>
Mysql 数据类型一日期
查看>>
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>
Mysql 整形列的字节与存储范围
查看>>
mysql 断电数据损坏,无法启动
查看>>
MySQL 日期时间类型的选择
查看>>
Mysql 时间操作(当天,昨天,7天,30天,半年,全年,季度)
查看>>
MySQL 是如何加锁的?
查看>>
MySQL 是怎样运行的 - InnoDB数据页结构
查看>>
mysql 更新子表_mysql 在update中实现子查询的方式
查看>>
MySQL 有什么优点?
查看>>
mysql 权限整理记录
查看>>