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

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

news 2025/12/16 8:58:25

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

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

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

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/12/9 5:17:54

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/12/8 12:11:59

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/9/12 0:24:07

使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台

🎯 使用 Streamlit 构建支持主流大模型与 Ollama 的轻量级统一平台 📌 项目背景 随着大语言模型（LLM）的广泛应用，开发者常面临多个挑战： 各大模型（OpenAI、Claude、Gemini、Ollama）接口风格不统一；缺乏一个统一平台进行模型调用与测试；本地模型 Ollama 的集成与前…...

编程新知 2025/12/6 15:11:15

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/12/9 16:40:19

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

编程新知 2025/12/12 23:11:21

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/12/11 8:48:18