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

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

news 2026/2/7 23:00:10

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

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

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

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

编程新知 2025/11/29 21:00:30

2025 后端自学UNIAPP【项目实战：旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

编程新知 2026/1/29 11:40:13

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2026/1/27 19:28:11

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

编程新知 2025/8/25 19:12:45

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2026/1/27 18:13:23

解读《网络安全法》最新修订，把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

编程新知 2026/1/31 4:40:38

MySQL 部分重点知识篇

一、数据库对象 1. 主键 定义 &#xff1a;主键是用于唯一标识表中每一行记录的字段或字段组合。它具有唯一性和非空性特点。 作用 &#xff1a;确保数据的完整性&#xff0c;便于数据的查询和管理。 示例 &#xff1a;在学生信息表中&#xff0c;学号可以作为主键&#xff…...

编程新知 2025/8/19 22:24:50

怎么开发一个网络协议模块（C语言框架）之(六) ——通用对象池总结(核心)

+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...

编程新知 2025/8/28 4:17:05