订水商城实战教程08-轮播图

简介: 订水商城实战教程08-轮播图

首页我们已经开发了店铺信息展示以及搜索功能,接着需要展示轮播图的功能。轮播图需要存放在数据源中,点击图片的时候要访问公众号的文章。

1 创建数据源

先创建数据源用来存放轮播图,打开控制台,点击数据模型,点击+号进行新建

输入数据源的名称轮播图

点击编辑,添加字段

添加第一个字段图片,类型选择图片

添加第二个字段,公众号文章链接,类型选择网址

添加第三个字段,是否启用,类型选择布尔值

2 轮播容器

往页面中添加轮播容器

然后在代码区点击+号创建一个变量

选择新建数据表查询

数据表选择轮播图

查询条件设置是否启用等于true

然后给图片绑定地址

$w.swaperlist.data.records[0].tp

按照上述方式绑定第二张、第三张图片

3 创建文章详情页

点击图片的时候我们要打开公众号的文章,需要新建一个页面,点击页面新建的图标

放入网页嵌套组件

选择页面组件,新建URL参数

输入参数名称URL

然后给网页嵌套绑定URL参数

给图片组件绑定点击事件,选择打开页面,选择文章详情页面

url绑定我们swaperlist的gzhwzlj

$w.swaperlist.data.records[0].gzhwzlj

4 设置权限

默认数据源设置的是只允许本人读写,像这种面向公众的,我们改为所有人都可以使用

总结

本篇我们介绍了轮播图组件的使用,轮播图组件配置还是比较简单的,主要是点击图片跳转的时候要调用网页嵌套组件来显示公众号文章,涉及到页面传参的问题。

相关文章
N..
|
开发框架 前端开发 JavaScript
Bootstrap轮播图
Bootstrap轮播图
N..
381 1
|
人工智能 JavaScript 语音技术
HarmonyOS NEXT AI基础语音服务-语音输入
本案例展示了一个基于AI语音服务的实时语音转文字功能,通过麦克风采集音频并转换为文本。主要步骤包括:申请麦克风权限、初始化语音识别引擎、设置识别回调、配置音频参数及实现UI交互(长按按钮控制录音启停)。代码使用TypeScript编写,涵盖权限管理、引擎生命周期、异常处理等核心环节,确保功能稳定运行。适用于需要实时语音转写的场景,如会议记录、语音输入等。
HarmonyOS NEXT AI基础语音服务-语音输入
|
开发者
HarmonyOS NEXT 实战系列09-生命周期
页面与组件生命周期介绍:页面生命周期(@Entry装饰)包含onPageShow、onPageHide、onBackPress等接口,分别在页面显示、隐藏和返回按钮点击时触发;组件生命周期(@Component装饰)包含aboutToAppear和aboutToDisappear,在组件创建与销毁时回调。示例代码展示了生命周期函数的使用场景及执行时机,帮助开发者更好地管理页面和组件状态。
HarmonyOS NEXT 实战系列09-生命周期
|
数据安全/隐私保护 SoC
基于PI控制的三相整流器控制系统的simulink建模与仿真,包含超级电容充电和电机
本课题基于MATLAB 2022a的Simulink平台,构建了PI控制的三相整流器控制系统,用于PMSM电机发电并为超级电容充电。系统通过调节电流和电压,实现高效能量管理和动力输出。核心模块包括三相整流器、超级电容及其显示模块、PI控制器。仿真结果无水印,完整展示了系统性能。系统原理涵盖交流转直流、超级电容快速充放电及电机驱动,适用于多种工况下的能量管理。
|
Kubernetes Unix Linux
k8s将节点容器运行时从Docker迁移到Containerd
k8s将节点容器运行时从Docker迁移到Containerd
|
Java Windows
[main] DEBUG Sigar - no sigar-amd64-winnt.dll in java.library.path org.hyperic.sigar.SigarException:
[main] DEBUG Sigar - no sigar-amd64-winnt.dll in java.library.path org.hyperic.sigar.SigarException:
476 1
|
缓存 数据库 索引
所有的接口都需要幂等吗?
幂等性(Idempotency)源自数学,指多次执行某操作结果不变。在计算机科学中,它确保在网络通信、重试机制和并发操作下系统状态一致。常见应用如HTTP方法中的GET、PUT、DELETE及数据库操作中的SELECT、UPDATE、DELETE等。实现幂等性可通过唯一请求ID、数据库约束、状态检查等方法。并非所有业务都需要幂等处理,需根据业务逻辑、系统容错策略及性能复杂度权衡。
300 0
|
前端开发 开发者
基于CSS mask-image 实现炫酷图片过渡效果之星球大战
基于CSS mask-image 实现炫酷图片过渡效果之星球大战
483 0
|
存储 消息中间件 监控
构建高效的数据流处理系统:从理论到实践
【8月更文挑战第27天】本文旨在通过深入浅出的方式,带领读者探索构建一个高效、可扩展的数据流处理系统的全过程。我们将从基本概念出发,逐步深入到架构设计、技术选型、实现细节,并最终展示如何将理论应用于实际项目中。文章不仅提供代码示例,还着重讨论了在设计和开发过程中遇到的挑战及解决策略,为希望深入了解或构建数据流处理系统的技术人员提供了一份实用指南。
|
前端开发 API CDN
Electron实现你自己的Markdown编辑软件
Electron实现你自己的Markdown编辑软件