微搭低代码数据容器组件使用解析

本文涉及的产品
容器服务 Serverless 版 ACK Serverless,952元额度 多规格
容器服务 Serverless 版 ACK Serverless,317元额度 多规格
容器镜像服务 ACR,镜像仓库100个 不限时长
简介: 微搭低代码数据容器组件使用解析

以前低代码要实现列表功能,需要通过基础组件结合变量定义及变量绑定实现。如果需要实现分页效果的,还需自己实现分页代码。对于初学者来说,要想把分页实现明白了也不容易。

为了降低使用难度,官方最近新上线了两个组件,列表视图组件及数据视图组件,来解决列表页搭建及详情页搭建的问题。通过熟练使用组件,来提高开发效率。本文就详细介绍一下这两个组件的用法。

列表视图组件


列表视图组件通过配置数据源,设置样式模板来快速创建列表页面。往编辑器中添加列表视图组件

数据模型可以选择我们需要的数据源,模板可以选择我们需要的显示效果。如果是首页,需要卡片式效果的,可以选择卡片列表。

卡片列表加载的是默认数据,如果希望替换成具体的字段的,可以选择对应的组件,比如先选中图片组件,在属性面板上点击数据绑定

在弹出的页面里数据字段就是选中数据源的具体字段,我们可以根据需要进行选择

绑定好数据之后页面就可以看到真实的数据

除了卡片式样式外,还有图文列表

简单列表

详细列表

等几种样式,如果觉得这些样式都不符合自己的要求,可以选择不使用模板

按照自己的需求进行组件的组装即可。

除了样式模板外,列表视图组件可以设置筛选条件

可行选择查询条件的字段

设置查询条件,是相等查询,还是不相等,包含等

具体的值可以选择是常量还是变量

除了设置查询条件还可以设置排序字段、排序类型、显示条数和分页方法

熟练配置属性就可以实现大部分页面上需要的效果,还是非常方便的。


数据视图


数据视图一般用在详情页显示单条记录的具体字段信息

需要选择数据模型,筛选条件需要设置数据标识等于页面的传入参数

一般单独设置这块可能有点复杂,我们可以在列表页,设置列表字段的跳转方法

在列表页面将传入参数设置好,在详情页设置的时候直接选择参数即可


总结



低码产品也是在日新月异的发展,会逐步的将大家常用的场景提炼成组件,这样我们在开发页面的时候只需设置好数据源,做好数据绑定,并且定义好交互事件即可。至于组件的逻辑完全由低码平台承担,低码之所以可以提高开发效率就是平台承担了技术的复杂度,我们只需关注我们自身的业务逻辑即可,这也是低码最大的魅力所在。


当然了,要想学会低码开发,还是按照实际的业务不断的进行搭建,熟能生巧,慢慢的就开发效率就提高了。


相关文章
|
9天前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
24 1
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
9天前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
25 1
数据解析之xpath 太6了
数据解析之xpath 太6了
|
9天前
|
XML 移动开发 JSON
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断
本文介绍了Twaver HTML5中的数据容器(DataBox),包括如何进行增删查改操作、遍历数据容器以及判断网元是否存在于数据容器中。DataBox用于管理所有的网元对象,如ElementBox、LayerBox、AlarmBox等,并通过示例代码展示了其常用方法的使用。
21 1
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断
|
11天前
|
存储 弹性计算 缓存
阿里云服务器ECS通用型实例规格族特点、适用场景、指标数据解析
阿里云服务器ECS提供了多种通用型实例规格族,每种规格族都针对不同的计算需求、存储性能、网络吞吐量和安全特性进行了优化。以下是对存储增强通用型实例规格族g8ise、通用型实例规格族g8a、通用型实例规格族g8y、存储增强通用型实例规格族g7se、通用型实例规格族g7等所有通用型实例规格族的详细解析,包括它们的核心特点、适用场景、实例规格及具体指标数据,以供参考。
阿里云服务器ECS通用型实例规格族特点、适用场景、指标数据解析
|
3天前
|
消息中间件 canal 关系型数据库
Maxwell:binlog 解析器,轻松同步 MySQL 数据
Maxwell:binlog 解析器,轻松同步 MySQL 数据
33 11
|
4天前
|
存储 索引 Python
python中的数据容器
python中的数据容器
|
9天前
|
数据采集 存储 JavaScript
构建您的第一个Python网络爬虫:抓取、解析与存储数据
【9月更文挑战第24天】在数字时代,数据是新的金矿。本文将引导您使用Python编写一个简单的网络爬虫,从互联网上自动抓取信息。我们将介绍如何使用requests库获取网页内容,BeautifulSoup进行HTML解析,以及如何将数据存储到文件或数据库中。无论您是数据分析师、研究人员还是对编程感兴趣的新手,这篇文章都将为您提供一个实用的入门指南。拿起键盘,让我们开始挖掘互联网的宝藏吧!
|
11天前
|
存储 开发框架 数据可视化
深入解析Android应用开发中的四大核心组件
本文将探讨Android开发中的四大核心组件——Activity、Service、BroadcastReceiver和ContentProvider。我们将深入了解每个组件的定义、作用、使用方法及它们之间的交互方式,以帮助开发者更好地理解和应用这些组件,提升Android应用开发的能力和效率。
|
4天前
|
Cloud Native 持续交付 Docker
深入解析Docker容器化技术及其在生产环境中的应用
深入解析Docker容器化技术及其在生产环境中的应用
10 0

推荐镜像

更多
下一篇
无影云桌面