当前位置： 首页 > news >正文

微搭低代码从入门到精通08-轮播容器

news 文章来源：https://blog.csdn.net/u012877217/article/details/128986624 2025/1/31 14:19:44

我们上一篇讲解了基础布局组件，讲解了普通容器和文本组件的用法，本篇我们继续介绍布局组件。

小程序中经常会有个功能是轮播图展示的功能，多张图片可以顺序进行切换。我们学习使用轮播容器的时候，先考虑切换的图片从哪来，通常图片都是存储到数据库中，轮播图通过调取数据库中的图片进行切换。

01 建立数据源

登录微搭控制台，点击数据模型，点击新建数据模型

在这里插入图片描述

输入数据模型的名称，会根据名称自动生成标识

在这里插入图片描述

点击右上角的编辑按钮，添加字段

在这里插入图片描述

点击添加字段，我们增加一个图片类型的字段

在这里插入图片描述

回到数据模型的列表页面，点击管理数据，我们添加一些测试数据

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

02 定义变量

我们的需求是从数据源中读取图片，就需要创建一个变量用来存放我们从数据源读取到的数据。

在应用模块，点击编辑应用，进入我们已经创建好的应用

在这里插入图片描述

打开应用编辑器，点击顶部导航条上的变量

在这里插入图片描述

点击新建变量

在这里插入图片描述

输入变量名，类型选择对象，选择我们刚刚创建的数据源

在这里插入图片描述

03 数据绑定

现在我们变量已经定义好了，微搭中将变量中存放的数据显示到页面上的概念叫数据绑定。轮播容器因为需要显示多张图片，就需要绑定循环展示。

先往页面中添加轮播容器组件

在这里插入图片描述

轮播容器自带三张图片进行切换，我们只保留一个图片组件

在这里插入图片描述

选中图片组件，点击循环展示旁边的超链接图标

在这里插入图片描述

选择我们刚刚定义的数组变量

在这里插入图片描述

然后给图片组件的地址属性绑定变量，我们从循环对象里选择图片字段

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

这样一个轮播容器就配置好了

总结

像轮播容器这种需要从数据源读取数据的组件，总是先需要考虑定义数据源的结构，也就是考虑数据源都需要哪些字段，字段的类型选择什么。

构造好数据源之后，在编辑器中想调取数据的，需要定义变量。最后的一步配置就是根据组件的各类属性，做数据绑定。不同的属性需要选择不同类型的变量。

像我们的循环展示，我们需要绑定为数组，而我们的图片的地址则需要绑定为文本类型的变量。

还有一点需要注意的就是，真正我们的循环内容是从循环变量里选择对应的字段。

以上就是今天讲解的全部内容。

相关文章：

微搭低代码从入门到精通08-轮播容器

我们上一篇讲解了基础布局组件，讲解了普通容器和文本组件的用法，本篇我们继续介绍布局组件。 小程序中经常会有个功能是轮播图展示的功能，多张图片可以顺序进行切换。我们学习使用轮播容器的时候，先考虑切换的图片从哪来&#xf…...

编程日记 2023/2/12 13:37:05

分类预测 | MATLAB实现SSA-CNN麻雀算法优化卷积神经网络多特征分类预测

分类预测 | MATLAB实现SSA-CNN麻雀算法优化卷积神经网络多特征分类预测 目录分类预测 | MATLAB实现SSA-CNN麻雀算法优化卷积神经网络多特征分类预测分类效果基本介绍模型描述程序设计参考文献分类效果 基本介绍 1.Matlab实现SSA-CNN麻雀算法优化卷积神经网络多特征分类预测&…...

编程日记 2023/2/12 13:35:56

华为10年经验测试工程师，整理出来的python自动化测试实战

前言 全书共分11章，第一章是基础，了selenium家谱，各种组件之间的关系以及一些必备知识。第二章告诉如何开始用python IDLE写程序以及自动化测试环境的搭建。第三章是webdriver API，我花了相当多时间对原先的文档，冗余…...

编程日记 2023/2/12 13:34:46

OpenCV杂谈 - 如何导出图像到内存中其他结构

前言 最近在net环境使用OpenCV,记录些疑难杂点. ​​​ 一、OpenCV主要结构 Mat 二、Cols,Rows 和 Width,Hight 三、导入\导出到内存中其他结构 四、按矩形 在Mat之间复制 总结 一、OpenCV主要结构 Mat Mat是OpenCV中的主要结构. 主要有两个用途. 1 存储图片信息,2 存…...

编程日记 2023/2/12 13:33:38

Session与Cookie的区别（四）

咖啡寄杯的烦恼 虽然店里生意还可以，但小明无时无刻不想着怎么样发大财赚大钱，让店里的生意变得更好。 他观察到最近好多便利商店开始卖起了咖啡，而且时不时就买一送一或是第二件半价，并且贴心地提供了寄杯的服务。 寄杯就是指说你…...

编程日记 2023/2/12 13:32:32

Linux 文件锁 - fcntl

什么是文件锁&#xff1f; 即锁住文件&#xff0c;不让其他程序对文件做修改&#xff01; 为什么要锁住文件&#xff1f; 案例&#xff0c;有两个程序&#xff0c;都对一个文件做写入操作。 #include <unistd.h> #include <stdio.h> #include <stdlib.h> …...

编程日记 2023/2/12 13:31:27

CellularAutomata元胞向量机-2-初等元胞自动机MATLAB代码分享

%% 二维元胞自动机%imagesc(a)的色度矩阵a中0->256由蓝变黄% 规则&#xff0c;先把中间点置为1&#xff0c;每一时间每一点如果%周围八个点和为偶数&#xff0c;则变为0&#xff0c;为奇数则变为 1% 颜色控制clc, clearMap [1 1 1; 0 0 0];% [0 0 0] is black, [1 1 1] is …...

编程日记 2023/2/12 13:30:23

OpenStack云平台搭建(6) | 部署Neutron

目录 1.在控制节点登录数据库配置 2.要创建服务证书&#xff0c;完成这些步骤 3.创建网络服务API端点&#xff1a; 4.安装网络组件 5.配置neutron组件 6.配置 Modular Layer 2 (ML2) 插件 7.配置Linuxbridge代理 8.配置DHCP代理 9.配置元数据代理 10.编辑/etc/nova/no…...

编程日记 2023/2/12 13:29:18

Lesson 05.Configuring the Oracle Network Environment

Lesson 05. Configuring the Oracle Network Environment 文章目录Lesson 05. Configuring the Oracle Network Environment1. 监听程序的配置文件有哪些&#xff0c;如何命名&#xff0c;保存在什么位置&#xff1f;2. Oracle 网络的服务名称文件是如何命名的&#xff0c;需要…...

编程日记 2023/2/12 13:28:12

理论五：接口vs抽象类的区别，如何用普通的类模拟抽象类和接口

在面向对象编程中,抽象类和接口是两个经常被用到的语法概念,是面向对象四大特性,以及很多设计模式、设计思想、设计原则编程实现的基础。比如,我们可以使用接口来实现面向对象的抽象特性、多态特性和基于接口而非实现的设计原则,使用抽象类来实现面向对象的继承特性和模板设计模…...

编程日记 2023/2/12 13:27:06

【Hello Linux】 Linux的权限以及Shell原理

作者&#xff1a;小萌新 专栏&#xff1a;Linux 作者简介&#xff1a;大二学生 希望能和大家一起进步&#xff01; 本篇博客简介&#xff1a;介绍Linux的基础命令 Linux的权限以及Shell原理Shell的运行原理权限Linux中权限的概念如何切换用户如何提升当前操作的权限如何添加信任…...

编程日记 2023/2/12 13:25:59

【STM32】【HAL库】遥控关灯2 分机

相关连接 【STM32】【HAL库】遥控关灯0 概述 【STM32】【HAL库】遥控关灯1主机 【STM32】【HAL库】遥控关灯2 分机 【STM32】【HAL库】遥控关灯3 遥控器 需求 接收RF433和红外信号,根据信号内容控制舵机 硬件设计 主控采用stm32F103c6 STM32 433接收 其他接口 软件设计 接…...

编程日记 2023/2/12 13:24:54

代码随想录算法训练营第27天|● 93.复原IP地址 ● 78.子集 ● 90.子集II

93.复原IP地址 看完题后的思路 典型分割问题略lue略剪枝条件 sub&#xff1a; 1&#xff09; 不是一位首字母为0 2&#xff09;大于三位 3&#xff09;介于0-255之间 4) 当已分割得到3个时&#xff0c;第四个直接从startIndex到末尾就行 代码 ArrayList<String> slist…...

编程日记 2023/2/12 13:23:48

Unity UI合批的问题

今天看到一个问题&#xff0c;主要说的是Unity中的UI资源合批的问题之前一直以为主要和UI资源在Hierarchy中的排列顺序有关&#xff0c;但其实这并不是最主要的&#xff0c;因为Unity会对同一个Canvas下的UI进行排序&#xff08;注&#xff1a;不同Canvas下的资源是不能够合批的…...

编程日记 2023/2/12 13:22:43

MWORKS--系统建模与仿真

MWORKS--系统建模与仿真1 系统定义特征2 系统研究2.1 特点与原则2.2 方法百度百科归纳同元杠归纳3 系统建模与仿真3.1 系统、模型、仿真的关系3.2 系统建模4 建模方法4.1 方法4.2 一般流程4.3 目的5 仿真方法5.1 方法5.2 流程参考1 系统定义 系统是由相互作用相互依赖的若干组…...

编程日记 2023/2/12 13:21:35

PC端开发GUI

PC端开发GUI 一、搭建PC端环境：常规方式1、Python2、Pycharm二、搭建PC端环境：创建虚拟环境1、创建文件夹存放虚拟环境相关2、配置环境变量3、创建.ui文件4、.ui文件转成.py文件5、打包.py文件来发布.exe一、搭建PC端环境：常规方式 1、Python 注意Python版本不能超过3.9，…...

编程日记 2023/2/12 13:20:29

解读手机拍照的各个参数(拍照时，上面会有6个符号)

1第一个符号是闪光灯符号&#xff0c;如下图所示。有四种模式&#xff0c; 手机的闪光灯分别为关闭、自动、开启和常亮四种状态。 关闭&#xff1a;就是在任何情况下都不会闪光 自动&#xff1a;由手机来判断此时的光线强弱&#xff0c;若手机测光认为光线太弱&#xff0c;则…...

编程日记 2023/2/12 13:19:23

数字钥匙最新进展文章

在未来出行上&#xff0c;智能汽车越来越卷。 新车除了拼高精度激光雷达、堆大算力芯片、标配辅助驾驶、智能语音识别&#xff0c;还在车钥匙上展开了激烈角逐&#xff0c;越来越多的厂商开始在量产车型上搭载数字钥匙&#xff0c;实现无钥匙进入车内。 去年1月蔚来发布轿车E…...

编程日记 2023/2/12 13:18:17

如何在VMware虚拟机上安装运行Mac OS系统（详细图文教程）

一、安装前准备 虚拟机运行软件&#xff1a;VMware Workstation Pro&#xff0c;版本&#xff1a;16.0.0 。VMware Mac OS支持套件&#xff1a;Unlocker。Mac OS系统镜像。 如果VMware 在没有安装Unlocker的情况下启动&#xff0c;在选择客户机操作系统时没有支持Mac OS的选项…...

编程日记 2023/2/12 13:17:10

C++中的强制类型转换

接触过C语言的朋友都知道&#xff0c;C语言中也有强制类型转换&#xff0c;但是C语言中的强制类型转换会有一些问题&#xff0c;比如&#xff1a; int a 0x1234; char b (char)a; 上述的代码出现一个问题就是a 这个int型强制转化成b 这个char型时损失了一些精度&#xff0c…...

编程日记 2023/2/12 13:16:04

任何人都可以学习Rasa之优秀Rasa学习资源推荐

任何人都可以学习Rasa之优秀Rasa学习资源推荐 欢迎同学们报名Gavin老师的Rasa系列课程&#xff0c;任何人都可以学习Rasa之优秀Rasa学习资源推荐&#xff1a; 1.NLP on Transformers高手之路137课 2 .Rasa 3.X 智能对话机器人案例开发硬核实战高手之路 &#xff08;7大项目Ex…...

编程日记 2023/2/12 13:14:56

数据中心的 TCP-Delay ACK 与 RTO, RACK

TCP 对 RTO 有个最小值限制&#xff0c;一般限制为 MIN_RTO 200ms。之所以有这个限制&#xff0c;在于要适应 Delay ACK&#xff0c;而 Delay ACK 的意义&#xff0c;不多说&#xff0c;摘自 RFC1122&#xff1a; MIN_RTO 应该足够大&#xff0c;以覆盖 Delay ACK 的影响&…...

编程日记 2023/2/12 13:13:51

MySQL与常见面试题

目录 事务概述ACIDAUTOCOMMIT总结并发一致性问题丢失修改读脏数据不可重复读幻读原因和解决方法隔离级别未提交读（READ UNCOMMITTED）提交读（READ COMMITTED）可重复读（REPEATABLE READ）可串行化（SERIALIZABLE）加锁封锁粒度封锁类型读写锁意向锁...

编程日记 2023/2/12 13:12:45

FFmpeg进阶: 采用音频滤镜对音频进行转码

文章目录采样位数采样率声道布局码率使用FFmpeg音频滤镜进行转码参考链接很多时候为了让视频文件适应不同的播放领域&#xff0c;我们需要对音频文件进行转码操作&#xff0c;转码操作其实主要就是修改音频文件的各种参数包括:采样位数、采样率、音频布局、码率等等。下面分别介…...

编程日记 2023/2/12 13:11:38

C++：AVL树

AVL树的概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查找元素相当于在顺序表中搜索元素&#xff0c;效率低下&#xff0c;时间复杂度为O&#xff08;N&#xff09;&#xff1b; 两位俄罗斯的数学家G.M.Ade…...

编程日记 2023/2/12 13:10:34

Docker中安装Oracle-12c

前言 MySQL和Oracle是开发中常用到的两个关系型数据库管理系统&#xff0c;接上一期内容&#xff0c;这一期在Docker中完成oracle-12c的安装和配置。 安装oracle-12c 1、拉取oracle-12c镜像 启动Docker Desktop后在cmd窗口中执行docker search oracle命令&#xff0c;搜索O…...

编程日记 2023/2/12 13:09:28

教你如何用Python分析出选注双色球号码

前言 嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 又到了学Python时刻~ 数据集介绍 找从19年到现在的开奖历史数据&#xff0c;我们首先要把这个历史数据拿到&#xff0c; 拿到我们再进行做分析&#xff0c;分析每个号码出现的频率是多少&#xff0c; 哪个多&#x…...

编程日记 2023/2/12 13:08:22

elasticsearch映射及字段类型

查询映射关系类型上对字段的类型进行映射&#xff0c;我们前面知道可以通过get方法请求_mapping查询指定类型的映射关系&#xff1a;此语句可以查询get-together索引下的group类型的映射关系更新映射关系使用put方法可以更新类型的映射这里指定了new-events类型的字段映射关系&…...

编程日记 2023/2/12 13:07:14

1493围圈报数（队列）

题目描述 有&#xff4e;个人依次围成一圈&#xff0c;从第&#xff11;个人开始报数&#xff0c;数到第&#xff4d;个人出列&#xff0c;然后从出列的下一个人开始报数&#xff0c;数到第&#xff4d;个人又出列&#xff0c;…&#xff0c;如此反复到所有的人全部出列为止。…...

编程日记 2023/2/12 13:06:09

【ArcGIS Pro二次开发】(2)：创建一个Add-in项目

Add-In即模块加载项&#xff0c;是一种能够快速扩展桌面应用程序功能的全新扩展方式。 一、创建新项目 1、打开VS2002&#xff0c;选择创建新项目。 2、在搜索框中输入“arcgis pro”&#xff0c;在搜索结果中选择【ArcGIS Pro 模块加载项】创建项目&#xff0c;注意选择语言应…...

编程日记 2023/2/12 13:04:01

织梦cms网站/百度爱采购平台登录

导读在上周末&#xff0c;开源的Mesa图形库背后的开发团队宣布&#xff0c;基于Linux的操作系统的最终Mesa 18.1版本发布。Mesa 18.1系列在大约18.0分支释出两个月后发布的&#xff0c;可能大多数GNU/Linux发行版目前正在使用&#xff0c;并且已经获得了第四次维护更新。 Mesa …...

编程日记 2025/1/31 14:17:51

wordpress全球销量主题/网络舆情案例分析

2019独角兽企业重金招聘Python工程师标准>>> 知道很厉害 但不知道怎么去用 Call to undefined function Swoole\posix_getpwnam() yum -y install php-process -m daemon php app_server.php -m fastcgi -h 127.0.0.1 -p 9501 -d 转载于:https://my.oschina.net/u…...

编程日记 2025/1/31 10:16:19

重庆哪家公司做网站好/易推客app拉新平台

php图片转换成二进制的方法&#xff1a;首先获取需要转换的图片&#xff1b;然后使用fopen函数读取图片信息&#xff1b;接着使用“fread($fp, filesize($img));”方法将图片转换成二进制数据即可。这次记录的东西很简单&#xff0c;就是把图片转成二进制数据存到数据库中&…...

编程日记 2025/1/31 10:01:23

如何让订阅号菜单做微网站/搜什么关键词能找到网站

项目地址&#xff1a;http://www.freeteam.cn/密码设置从右侧管理菜单点击密码设置进入。输入正确的当前密码和新密码后点击修改即可。转载于:https://blog.51cto.com/3357346/2322921...

编程日记 2025/1/31 8:56:39

做内网网站/seo去哪里学

基于计算机视觉技术的入侵检测通过设计图像处理方法实现对某一动态场景的实时观测&#xff0c;并在场景存在外来入侵情况时向上层管理系统发送入侵检测结果&#xff1b;要求独立编写具有以下功能模块的程序源码&#xff0c; 1&#xff0e; 通过手机/个人笔记本内置摄像机连续…...

编程日记 2025/1/31 8:05:21

wordpress网站布局/新手怎么推广自己的店铺

MariaDB数据库 数据库介绍 MySQL与MariaDB 数据库部署1.安装MariaDB数据库2.重启mariadb服务并加入开机启动项3.!数据库初始化4.设置防火墙策略5.登录数据库 数据库常用语句 创建数据库 查询指定位置数据 数据库备份 彻底删除数据库 恢复数据 数据库介绍 数据库&#xff1a;是…...

编程日记 2025/1/31 5:32:59