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

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

news 2026/5/12 18:30:24

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

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

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

[具身智能-653]：人的大脑神经网络就是天然的模拟电路，还是数字电路？

结论先给&#xff1a;人脑神经网络&#xff0c;本质是【天然模拟电路】&#xff0c;不是数字电路这和前面聊的模拟电路频域特性、硬件隐式频域滤波完全同逻辑。一、先分清&#xff1a;数字电路 vs 模拟电路 核心区别数字电路只有0、1两种离散电平&#xff0c;跳变是阶跃式&…...

编程新知 2026/5/12 17:39:13

为什么你的学术论文格式转换总是失败？docx2tex 3步解决方案

为什么你的学术论文格式转换总是失败&#xff1f;docx2tex 3步解决方案 【免费下载链接】docx2tex Converts Microsoft Word docx to LaTeX 项目地址: https://gitcode.com/gh_mirrors/do/docx2tex 还在为Word到LaTeX的格式转换头痛吗&#xff1f;每次提交学术论文、技术…...

编程新知 2026/5/12 17:30:10

Loop Habit Tracker习惯追踪应用技术深度解析与架构实践指南

Loop Habit Tracker习惯追踪应用技术深度解析与架构实践指南 【免费下载链接】uhabits Loop Habit Tracker, a mobile app for creating and maintaining long-term positive habits 项目地址: https://gitcode.com/gh_mirrors/uh/uhabits Loop Habit Tracker是一款基于…...

编程新知 2026/5/12 16:24:05

如何用自动化脚本解放双手：淘宝淘金币全任务一键完成指南

如何用自动化脚本解放双手&#xff1a;淘宝淘金币全任务一键完成指南 【免费下载链接】taojinbi 淘宝淘金币自动执行脚本&#xff0c;包含蚂蚁森林收取能量&#xff0c;芭芭农场全任务&#xff0c;解放你的双手 项目地址: https://gitcode.com/gh_mirrors/ta/taojinbi 还…...

编程新知 2026/5/12 14:55:55

别再死记硬背了！用一块74283芯片搞定所有BCD码转换（附实战练习题）

用74283芯片玩转BCD码转换&#xff1a;从原理到实战的终极指南 在数字电路设计与计算机组成原理的学习中&#xff0c;BCD码转换一直是让许多学生头疼的"拦路虎"。传统的死记硬背方法不仅效率低下&#xff0c;更无法应对考试中千变万化的题型。本文将彻底改变这一现状…...

编程新知 2026/5/12 14:21:35

机箱机柜模块化设计方法

在机箱机柜制造领域&#xff0c;模块化设计正逐渐成为提升生产效率、降低成本、增强产品灵活性的关键方法。今天&#xff0c;我们就来深入探讨机箱机柜模块化设计方法&#xff0c;同时为大家推荐深圳市机汇五金制品有限公司&#xff08;以下简称“机汇五金”&#xff09;&#…...

编程新知 2026/5/12 14:09:45

Smarty 模板中实现多维数组按字段分组并拼接值的完整方案

...

编程新知 2026/5/12 12:39:01

DS4Windows终极指南：让PS4/PS5手柄在Windows上完美工作的完整教程

DS4Windows终极指南&#xff1a;让PS4/PS5手柄在Windows上完美工作的完整教程 【免费下载链接】DS4Windows Like those other ds4tools, but sexier 项目地址: https://gitcode.com/gh_mirrors/ds/DS4Windows DS4Windows是一款功能强大的开源工具&#xff0c;专门解决Pl…...

编程新知 2026/5/12 11:37:53

OpenClaw微信公众号插件wemp v2：双Agent路由与混合知识库实战

1. 项目概述&#xff1a;一个为OpenClaw设计的微信公众号插件如果你正在寻找一个能够将你的AI助手能力无缝接入微信公众号&#xff0c;实现自动化客服、智能问答甚至更复杂交互的解决方案&#xff0c;那么你找对地方了。wemp&#xff08;WeChat MP Plugin&#xff09;正是这样一…...

编程新知 2026/5/12 7:37:30

智能任务调度引擎：重构碧蓝航线自动化管理架构

智能任务调度引擎&#xff1a;重构碧蓝航线自动化管理架构 【免费下载链接】AzurLaneAutoScript Azur Lane bot (CN/EN/JP/TW) 碧蓝航线脚本 | 无缝委托科研&#xff0c;全自动大世界 项目地址: https://gitcode.com/gh_mirrors/az/AzurLaneAutoScript 在移动游戏生命周…...

编程新知 2026/5/12 7:29:03