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

家政服务小程序实战教程07-轮播图组件

news 2026/5/12 6:07:40

小程序中首页一般显示轮播图的功能，点击轮播图会跳转到具体的一篇文章或者是产品，本篇我们就介绍一下轮播图功能的开发

01 设计数据源

我们轮播图组件需要两个字段，一个是展示的图片，一个是跳转页面传入的参数。打开数据源，点击新建数据模型

在这里插入图片描述

输入名称首页轮播图

在这里插入图片描述

点击编辑按钮进入到添加字段页面

在这里插入图片描述

点击添加字段

在这里插入图片描述

先添加图片字段

在这里插入图片描述

然后添加服务标识字段

在这里插入图片描述

02 录入测试数据

点击管理数据，录入测试数据

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

服务标识需要我们创建服务表的时候获取，我们本节只讲解轮播图的使用，暂不涉及到其他表的创建

03 添加轮播图

在首页中添加轮播图组件

在这里插入图片描述

点击轮播图属性，可以看到轮播图主要是配置图片地址和跳转的页面

在这里插入图片描述

图片地址我们需要从数据源中获取，获取数据源中的数据需要定义变量

04 定义变量

点击变量，点击新建变量

在这里插入图片描述

输入变量名称swaperlist，类型选择对象，选择我们的轮播图数据源，方法选择查询列表

在这里插入图片描述

05 数据绑定

我们先给第一张图片绑定图片地址，从变量中选择第一条记录

在这里插入图片描述

绑定第二张图片地址

在这里插入图片描述

注意需要将records的下标改为1

$page.dataset.state.swaperlist.records[1].tp

绑定第三张图片

在这里插入图片描述

$page.dataset.state.swaperlist.records[2].tp

至此轮播图的功能就搭建好了，后续我们在实现完服务功能页后重新修改一下轮播图，让轮播图点击的时候可以直接跳转到服务详情页。

相关文章：

家政服务小程序实战教程07-轮播图组件

小程序中首页一般显示轮播图的功能，点击轮播图会跳转到具体的一篇文章或者是产品，本篇我们就介绍一下轮播图功能的开发 01 设计数据源 我们轮播图组件需要两个字段，一个是展示的图片，一个是跳转页面传入的参数。打开数据源&…...

编程日记 2023/5/15 4:39:25

MySQL之索引创建、删除、唯一索引、普通索引、及命名规则、注意事项

一、MySQL 索引 定义 索引是一个数据结构，用于加速数据库表中数据的查询。索引存储了一些数据表中的列值，以及这些列值在数据表中的位置，这样就可以通过索引来快速查找到数据表中的某一行数据。 MySQL 支持多种索引类型，包括普通…...

编程日记 2023/5/23 1:09:29

【C++设计模式】学习笔记（3）：策略模式 Strategy

目录 简介动机（Motivation）模式定义结构（Structure）要点总结笔记结语简介 Hello！ 非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～ ଘ(੭ˊᵕˋ)੭ 昵称：海轰 标签：程序猿｜C++选手｜学生 简介：因C语言结识编程，随后转入计算机专业，获得过国家奖学金…...

编程日记 2023/5/14 7:57:34

Java——聊聊JUC中的ThreadLocal

文章目录： 1.什么是ThreadLocal？ 1.1 api介绍 1.2 最简单的案例认识ThreadLocal 1.3 线程池结合ThreadLocal案例 2.Thread &ThreadLocal & ThreadLocalMap 3.ThreadLocal内存泄漏问题 3.1 四大引用之强引用 3.2 四大引用之软引用 3.3 四…...

编程日记 2023/5/23 1:52:42

软件工程(4)--螺旋模型

前言 这是基于我所学习的软件工程课程总结的第四篇文章。 在软件开发过程中必须及时识别和分析风险，并且采取适当措施以消除或减少风险的危害。构建原型是一种能使某些类型的风险降至最低的方法。为了降低交付给用户的产品不能满足用户需要的风险，一种行…...

编程日记 2023/5/27 6:28:07

图解LeetCode——剑指 Offer 50. 第一个只出现一次的字符

一、题目 在字符串 s 中找出第一个只出现一次的字符。如果没有&#xff0c;返回一个单空格。 s 只包含小写字母。 二、示例 2.1> 示例 1: 【输入】s "abaccdeff" 【输出】b 2.2> 示例 2: 【输入】s "" 【输出】 限制&#xff1a; 0 < s 的…...

编程日记 2023/5/17 23:06:20

《HTML 5与CSS 3核心技法》读书笔记

目录前言第1章 写在前面第2章 HTML 语法基础第3章 布局类元素 &#xff0c;房子的楼板、柱子和大梁第4章 功能类元素&#xff0c;房子的门、窗、水管和电气第5章 CSS基础第6章 选择器&#xff0c;确定样式的作用范围选择器类型选择器的组合使用第7章 权重&#xff0c;样式发送冲…...

编程日记 2023/5/12 2:30:45

【沐风老师】3DMAX几何投影插件Geometry Projection使用详解

【几何投影插件】 描述 3DMAX几何投影插件Geometry Projection&#xff0c;将一个或多个对象或它的顶点选择沿全局或局部 x、y 或 z 轴投影到另一个对象上。 适用版本 3dMax2013或更高版本 安装设置 插件的安装非常简单&#xff0c;解压后把插件脚本 “geometry_projectio…...

编程日记 2023/5/27 6:29:15

面试问题整理

20200422面试题 1、有nginx为什么还要用gateway 2、factorybean和beanfactory有什么区别 https://www.cnblogs.com/leeego-123/p/12159574.html 2、aop原理 3、ioc原理 4、注解requestbody和responsebody区别。pathvireable和requestparam注解区别&#xff0c;feign客户端的注解…...

编程日记 2023/5/23 16:56:19

“区块链60人”2022赋能中国区块链创新人物名单公布

2022年11月5日&#xff0c;“2022第五届全国高校人工智能大数据区块链教育教学创新论坛”在京隆重召开。此次论坛公布了“区块链60人”2022赋能中国区块链创新人物评选活动获评名单。 本次评选活动通过媒体报道、第三方推荐、专家评选等环节&#xff0c;坚持“公开、公平、公正…...

编程日记 2023/5/27 6:30:59

day2324 数组

文章目录相关概念codeArrayTest08 数组拷贝相关概念 day23课堂笔记 1、数组 1.1、数组的优点和缺点&#xff0c;并且要理解为什么。 第一&#xff1a;空间存储上&#xff0c;内存地址是连续的。 第二&#xff1a;每个元素占用的空间大小相同。 第三&#xff1a;知道首元素的内…...

编程日记 2023/5/23 1:54:54

【Python实战】神仙运气—快看看你的彩票：2千多万元大奖无人领，马上就过期了，下一期的中奖者会是你吗？（纯技术交流）

前言 越努力越幸运 哈喽~我是栗子同学&#xff01; 特别注意&#xff1a;不管是沉迷赌球&#xff0c;还是沉迷购彩&#xff0c;都是不可取的。本文纯是一个技术学习内容。 听说关注我的人会暴富哦&#xff01;、 所有文章完整的素材源码都在&#x1f447;&#x1f447; 粉丝…...

编程日记 2023/4/9 13:56:56

2023年上半年软考高项信息系统项目管理师2月25日开班

信息系统项目管理师是全国计算机技术与软件专业技术资格&#xff08;水平&#xff09;考试&#xff08;简称软考&#xff09;项目之一&#xff0c;是由国家人力资源和社会保障部、工业和信息化部共同组织的国家级考试&#xff0c;既属于国家职业资格考试&#xff0c;又是职称资…...

编程日记 2023/5/24 14:16:00

数据库（第一天）

文档信息 文档类别正式文档文档编号数据库基础课 1.2-001版本1.2-001文档名称数据库基础课编写负责人/编写时间梁昭东/2023 年 1 月 30 日审核负责人/审核时间年 月 日批准人/批准时间年 月 日 变更记录 日期版本号变更内容修订者2023.01.30v1.2版根据实际情况增删了部分内容…...

编程日记 2023/4/15 2:46:01

一文了解 ArrayList 的扩容机制

了解 ArrayList 在 Java 中常用集合类之间的关系如下图所示&#xff1a; 从图中可以看出 ArrayList 是实现了 List 接口&#xff0c;并是一个可扩容数组&#xff08;动态数组&#xff09;&#xff0c;它的内部是基于数组实现的。它的源码定义如下&#xff1a; public class A…...

编程日记 2023/5/17 2:09:03

牛态已成选股源码

{牛态已成} {条件选股} {其他类型} N:7; A1:(REF(H,N) HHV(H,((2 * N) 1))); B1:FILTER(A1,N); C1:BACKSET(B1,(N 1)); D1:FILTER(C1,N); A2:(REF(L,N) LLV(L,((2 * N) 1))); B2:FILTER(A2,N); C2:BACKSET(B2,(N 1)); D2:FILTER(C2,N); E1:((REF(LLV(L,(2 * N)),1) REF(…...

编程日记 2023/5/18 9:42:38

Python基础

Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。Python 的设计具有很强的可读性&#xff0c;相比其他语言经常使用英文关键字&#xff0c;其他语言的一些标点符号&#xff0c;它具有比其他语言更有特色语法结构。小编也整理了一套关于学习Python入门…...

编程日记 2023/5/16 18:18:11

浅显易懂的说清楚小游戏与H5游戏的技术区别

从“跳一跳”到“羊了个羊”微信小游戏上线4年时间&#xff0c;除了涌现出不少火爆全网的小游戏之外&#xff0c;也有类似于“动物餐厅”、“口袋奇兵”等游戏得以在此孵化繁荣&#xff0c;凭借着微信强大的社交属性小游戏成为游戏厂商在桌面端、App 端、H5 端之外争夺的另一个…...

编程日记 2023/5/15 4:40:54

【Python入门第七天】Python 数字

Python 数字 Python 中有三种数字类型&#xff1a; intfloatcomplex 为变量赋值时&#xff0c;将创建数值类型的变量&#xff1a; 实例 x 10 # int y 6.3 # float z 2j # complex如需验证 Python 中任何对象的类型&#xff0c;请使用 type() 函数&#xff1a; 实…...

编程日记 2023/5/30 10:24:03

Python自动化测试 软件测试最全教程（附笔记），看完可就业

最近看到很多粉丝在后台私信我&#xff0c;叫我做一期Python自动化测试的教程&#xff0c;其实关于这个问题&#xff0c;我也早就在着手准备了&#xff0c;我录制了一整套完整的Python自动化测试的教程&#xff0c;都上传在B站上面&#xff0c;大家有兴趣的可以去看一下&#x…...

编程日记 2023/5/27 6:32:36

泉盛UV-K5/K6固件深度定制指南：解锁专业级无线电功能

泉盛UV-K5/K6固件深度定制指南&#xff1a;解锁专业级无线电功能 【免费下载链接】uv-k5-firmware-custom 全功能泉盛UV-K5/K6固件 Quansheng UV-K5/K6 Firmware 项目地址: https://gitcode.com/gh_mirrors/uvk5f/uv-k5-firmware-custom 你是否对原厂固件的功能限制感到…...

编程新知 2026/5/12 5:56:23

腾讯位置服务开发者征文大赛：“独行侠”智能路线官

一个关于城市夜跑者、算法盲区与AI情感化路线推荐的真实技术实践 关键词&#xff1a;Go、地图SDK抽象、LLM Agent、Prompt工程、情感化推荐 目录 背景需求&#xff1a;都市独行侠的运动品质困境痛点诊断&#xff1a;为什么传统地图工具"听不懂人话"Module-SDK&#…...

编程新知 2026/5/12 4:25:02

热间隙填充材料在PCB散热设计中的关键应用与选型

1. 热间隙填充材料在PCB散热设计中的核心作用热间隙填充材料&#xff08;Thermal Gap Filler&#xff09;是现代电子散热系统中不可或缺的功能性材料。作为一名经历过数十个散热方案设计的工程师&#xff0c;我深刻理解这类材料在解决"散热器与PCB之间公差累积"问题上…...

编程新知 2026/5/12 3:34:39

绩效考核的量化迷思：如何衡量不可直接测量的技术贡献

一、量化绩效考核的困境&#xff1a;软件测试的“隐形”价值在软件行业的绩效考核体系中&#xff0c;量化指标似乎成了“公平”与“高效”的代名词。代码行数、Bug数量、测试用例覆盖率……这些清晰可统计的数字&#xff0c;被当作衡量技术人员贡献的核心标尺。然而&#xff0c…...

编程新知 2026/5/12 1:41:57

AI原生图计算不是“加个GNN层”那么简单：SITS 2026定义的5层工程化成熟度模型（附自测清单+迁移路线图）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;AI原生图计算应用&#xff1a;SITS 2026图神经网络工程化方案 SITS 2026 是面向大规模动态图场景的AI原生图计算框架&#xff0c;深度融合GNN训练、图拓扑实时更新与边缘-云协同推理能力。其核心设计摒…...

编程新知 2026/5/12 0:03:17

《凰标》与《第一大道》：同一宇宙下的龙凤双璧@凤凰标志

龙凤双璧&#xff1a;海棠山铁哥文学宇宙宣言——《第一大道》《凰标》世界观联动白皮书一、时代之问&#xff1a;当网文只剩“单兵”市场痛点铁哥答案单兵叙事双IP共生世界观割裂同源宇宙IP不成体系闭环叙事 二、宇宙基石&#xff1a;一破一立的双璧格局 #mermaid-svg-A2eFhZn…...

编程新知 2026/5/11 23:16:29

Vivado时序约束实战：输入/输出延时设置背后的时序模型与设计考量

1. 时序约束的本质&#xff1a;从理论到实践的桥梁 刚接触FPGA设计时&#xff0c;我最头疼的就是时序约束。那些建立时间、保持时间的概念看得人云里雾里&#xff0c;更别说要在Vivado里实际设置了。直到有一次项目因为时序问题导致整板无法工作&#xff0c;我才真正明白时序约…...

编程新知 2026/5/11 23:16:17

Abaqus 6.12 保姆级教程：手把手教你搞定悬臂梁的动力学仿真（附阻尼设置与结果动画）

Abaqus 6.12 悬臂梁动力学仿真全流程实战&#xff1a;从阻尼优化到动画渲染 悬臂梁作为结构动力学分析的经典案例&#xff0c;在机械振动、建筑抗震等领域具有广泛的应用价值。本文将基于Abaqus 6.12平台&#xff0c;通过一个完整的动力学仿真案例&#xff0c;深入解析从模型建…...

编程新知 2026/5/11 22:07:58

ROS机器人开发：用tf_monitor和tf_echo快速诊断你的坐标转换问题（附真实案例）

ROS机器人坐标转换问题诊断实战&#xff1a;从工具使用到思维升级 当机器人的激光雷达数据与地图匹配出现偏移&#xff0c;或者机械臂末端执行器总是偏离目标位置几厘米时&#xff0c;有经验的开发者会第一时间检查坐标转换系统。ROS中的tf库虽然强大&#xff0c;但一旦出现问题…...

编程新知 2026/5/11 20:04:29

Windows系统mqad.dll文件丢失无法启动程序解决

在使用电脑系统时经常会出现丢失找不到某些文件的情况&#xff0c;由于很多常用软件都是采用 Microsoft Visual Studio 编写的&#xff0c;所以这类软件的运行需要依赖微软Visual C运行库&#xff0c;比如像 QQ、迅雷、Adobe 软件等等&#xff0c;如果没有安装VC运行库或者安装…...

编程新知 2026/5/11 18:17:09