微搭低代码从入门到精通09-数据容器

news2024/9/29 3:25:39

我们已经用了两篇的篇幅介绍了微搭的布局组件,包括普通容器、文本、图片、轮播容器。

微搭中还有粗粒度的组件,今天介绍的数据容器就是粗粒度的组件。所谓粗粒度的组件,一般包括基础组件、样式还有默认的事件。数据容器一共包含三种分别是数据列表、数据详情和表单容器。

在我们传统开发中,我们将页面的基本功能拆分成增删改查。使用低码开发的时候我们用上述的三个组件就可以实现页面的基本功能。

01 数据列表

数据列表对应着我们页面中的列表查询功能,使用的时候先将组件拖入到编辑区

在这里插入图片描述

数据列表组件包括五种效果可供选择,分别是空白、简单列表、详细列表、图文列表、卡片列表。

不同模板对应着不同的场景。比如一般首页如果我们放一些动态信息的就可以放简单列表,如果你的动态配了图片的可以选择图文列表。卡片列表一般用在电商类小程序用来展示最新的商品。

我们这里选择简单列表作为示例,选择了模板之后需要选择对应的数据源,组件会自动识别自动进行数据绑定

在这里插入图片描述

如果自动识别的字段不是你需要的,可以选择文本组件,重新绑定需要的内容

在这里插入图片描述

绑定的时候要从循环对象里选择需要的字段

在这里插入图片描述

02 数据详情

数据详情对应着我们小程序里查看详情的功能,一般的场景是从列表页点击某条数据,跳转到详情页然后进行展示。

因为要进行页面跳转,我们需要先新建一个详情页。在页面区域点击+号,创建一个详情页。

在这里插入图片描述
在这里插入图片描述

在详情页,我们将数据详情组件拖入到编辑区

在这里插入图片描述

数据详情组件先需要选择需要的数据源

在这里插入图片描述

数据详情需要根据页面传入的数据标识来过滤数据,我们会到我们的列表页面,选中我们的组件,给组件定义点击事件,然后传入数据标识

在这里插入图片描述

我们配置的动作是打开页面,选择我们的详情页

在这里插入图片描述

需要先新建一个页面URL参数

在这里插入图片描述

输入标识

在这里插入图片描述

参数建立了之后我们进行数据绑定

在这里插入图片描述

从循环对象里选择我们的_id绑定

在这里插入图片描述

列表页配置好之后,我们选择详情页,配置筛选条件,我们将数据标识配置成我们的参数

在这里插入图片描述
在这里插入图片描述

03 表单容器

表单容器一般用在我们的新增或者更新场景,先新建一个数据添加的页面

在这里插入图片描述

然后将表单容器组件添加到页面中

在这里插入图片描述

选择我们需要的数据源

在这里插入图片描述

表单容器会自动的识别字段的类型,生成对应的组件

总结

本篇我们介绍了我们小程序开发中经常会用的三种组件,数据列表、数据详情、表单容器的使用方法。掌握这些常用组件,就可以快速开发出页面来,打开你的微搭赶快试试吧。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/339342.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vscode sftp从linux服务器下载文件至本地:No such file or dictionary【已解决】

在服务器跑完程序需要下载数据的时候报错: [warn] ENOENT: no such file or directory, open /home/LIST_2080Ti/.ssh/config load /home/LIST_2080Ti/.ssh/config failed 完整报错内容如下: [02-10 08:38:47] [info] config at /home/LIST_2080Ti {&q…

Arm-Linux子系统的互相Notify

前言: Linux下面不同的子系统一个个的组成了整个系统的运行环节,为了让这些子系统能够互相通讯,有一种叫做:notify chain(通知链)的东西。本篇看下。 概括 所谓通知链,有通知,就有执行的地方。比如A子系统通…

无题

(1)风国产化替代?全球化?新一代数字化技术升级?云化(公有云化)?业务线上化?产业互联整合?私有云原生技术可以支撑:国产化替代-新一代数字化技术升…

WPS底层逻辑串讲

文章目录wps页面基本介绍演示文稿功能讲解框架介绍具体功能讲解:1. 另存为2. 输出图片3. 文件打包4. 演示文稿打印5. 文档加密两种方式 ❤文件打开密码 :文档加密--->密码加密--》输入密码即可 ❤文档编辑密码:输出为PDF--->设置即可6.…

【老卫拆书】009期:Vue+Node肩挑全栈!《Node.js+Express+MongoDB+Vue.js全栈开发实战》开箱

今天刚拿到一本新书,叫做《Node.jsExpressMongoDBVue.js全栈开发实战》,做个开箱。 外观 先从外观上讲,这本是全新的未开封的,膜还在。 这本书介绍从技术原理到整合开发实战,以丰富的项目展现全栈开发的一个技巧。 …

ChatGPT如何注册,如何使用(个人版)文末送账号

您好,我是码农飞哥(wei158556),感谢您阅读本文,欢迎一键三连哦。 💪🏻 1. Python基础专栏,基础知识一网打尽,9.9元买不了吃亏,买不了上当。 Python从入门到精…

ES8——Generator函数的使用

babel工具插件下载:npm i --save babel-polyfill 引入:polyfill.js进行转码(es8->es5) 介绍 Generator函数用于生成迭代器 function * (){} yeild: 作用同return类似 {const obj function* () {yield "a";yield 12…

分享! opensource.builders——为您喜爱的应用程序查找开源替代方案

今天和大家分享一个非常有意思的网站, 我们可以从这个网站中找到一些常用软件的开源替代方案, 比如说之前很火Notion, 我们可以找到它的开源替代方案——Appflowy, 并且在 github 上学习部署它的本地版本.好啦, 话不多说, 上地址:网址地址: https://opensource.builders/github…

数据库(三):多版本并发控制MVCC,行锁的衍生版本,记录锁,间隙锁, Next-Key锁(邻键锁)

文章目录前言一、MVCC以及MVCC的缺点1.1 MVCC可以为数据库解决什么问题1.2 MVCC的基本思想1.3 版本号1.4 Undo日志1.5 ReadView1.6 快照读和当前读1.6.1 快照读1.6.2 当前读二、记录锁三、间隙锁四、邻键锁总结前言 一、MVCC以及MVCC的缺点 MVCC,即多版本并发控制…

Linux clock子系统及驱动实例

文章目录基本概念CLK子系统时钟API的使用clock驱动实例1、时钟树2、设备树3、驱动实现fixed_clk固定时钟实现factor_clk分频时钟实现gate_clk门控时钟实现基本概念 晶振:晶源振荡器 PLL:Phase lock loop,锁相环。用于提升频率 OSC&#xff1a…

数据结构与算法这么难,为什么我们还要学习?

文章目录前言1. 数据结构与算法是什么?2. 为什么数据结构与算法很难?3. 如何系统学习数据结构与算法?🍑 复杂度🍑 线性表🍑 树形结构🍑 图🍑 排序🍑 字符串🍑…

Django框架之站点管理

站点管理 站点: 分为内容发布和公共访问两部分内容发布的部分由网站的管理员负责查看、添加、修改、删除数据Django能够根据定义的模型类自动地生成管理模块使用Django的管理模块, 需要按照如下步骤操作 : 1.管理界面本地化2.创建管理员3.注册模型类4.发布内容到数据库 1.管理…

备战蓝桥杯第一天【二分查找无bug版】

🌹作者:云小逸 📝个人主页:云小逸的主页 📝Github:云小逸的Github 🤟motto:要敢于一个人默默的面对自己,强大自己才是核心。不要等到什么都没有了,才下定决心去做。种一颗树,最好的时间是十年前…

基于 python获取教育领域新闻进行分词关键词词共现分析 Gephi 软件绘制主题知识图谱

本文着眼于对疫情期间教育领域新闻的分析,基于 python 语言,利用爬虫获取教育领域的最新新闻,并将其内容进行分词,抓取关键词。在此基础上,根据关键词进行共现分析,并利用 Gephi 软件绘制主题知识图谱&…

超详细讲解长度受限制的字符串函数(保姆级教程!!!)

超详细讲解长度受限制的字符串函数(保姆级教程!!!)长度受限制的字符串函数strncpy函数strncpy函数的使用strncpy函数的模拟实现strncat函数strncat函数的使用strncat函数的模拟实现strncmp函数strncmp函数的使用strncm…

【golang分布式Job调度服务】

需求背景 目前各服务里经常会有定时任务相关需求,而定时任务通常要求同时只有一个任务执行,为了保证定时任务高可以通常也需要主备部署,导致开发定义任务时需要考虑锁竞争关系,以及考虑任务执行状态(成功、失败、重试…

Lambda表达式了解到使用(清晰明朗)

这里写目录标题lambda简述以前的实现初次使用lambda表达式Lambda表达式的语法测试方法lambda表达式简写示范测试方法运行结果方法引用测试方法运行结果构造方法引用定义一个Boy类编写测试方法运行结果实际应用测试代码运行结果内置函数式接口FunctionalInterface注解Functional…

自从学会了Python,我实现了壁纸自由(6)

小朋友们好,大朋友们好!我是猫妹!哈哈哈,又到周末啦!这周过得怎么样?马上就要开学了,寒假作业早已写好了吧?开学让人兴奋,上了很久网课都要吐啦!开学也让人有…

HTTPS为什么就安全了?或者说要安全我们要做到什么?

目录 一 安全概念 二 HTTPS的安全措施 三 总结 一 安全概念 网络安全是一个比较笼统的概念。我们说网络安全的时候,往往会包含很多安全问题,包括网络设备层面、通信过程、数据本身等多方面引入的安全问题。比如设备被有意无意的破坏,链路…