博客
关于我
腾讯低代码(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加强(3)~分组(统计)查询
查看>>
mysql加强(4)~多表查询:笛卡尔积、消除笛卡尔积操作(等值、非等值连接),内连接(隐式连接、显示连接)、外连接、自连接
查看>>
mysql加强(5)~DML 增删改操作和 DQL 查询操作
查看>>
mysql加强(6)~子查询简单介绍、子查询分类
查看>>
mysql加强(7)~事务、事务并发、解决事务并发的方法
查看>>
MySQL千万级多表关联SQL语句调优
查看>>
mysql千万级大数据SQL查询优化
查看>>
MySQL千万级大表优化策略
查看>>
MySQL单实例或多实例启动脚本
查看>>
MySQL压缩包方式安装,傻瓜式教学
查看>>
MySQL原理、设计与应用全面解析
查看>>
MySQL原理简介—1.SQL的执行流程
查看>>
MySQL参数调优详解
查看>>
mysql参考触发条件_MySQL 5.0-触发器(参考)_mysql
查看>>
MySQL及navicat for mysql中文乱码
查看>>
MySqL双机热备份(二)--MysqL主-主复制实现
查看>>
MySQL各个版本区别及问题总结
查看>>
MySql各种查询
查看>>
mysql同主机下 复制一个数据库所有文件到另一个数据库
查看>>
mysql启动以后会自动关闭_驾照虽然是C1,一直是开自动挡的车,会不会以后就不会开手动了?...
查看>>