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

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

1 创建数据源

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

输入数据源的名称轮播图

点击编辑,添加字段

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

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

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

2 轮播容器

往页面中添加轮播容器

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

选择新建数据表查询

数据表选择轮播图

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

然后给图片绑定地址

javascript 复制代码
$w.swaperlist.data.records[0].tp

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

3 创建文章详情页

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

放入网页嵌套组件

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

输入参数名称URL

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

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

url绑定我们swaperlist的gzhwzlj

javascript 复制代码
$w.swaperlist.data.records[0].gzhwzlj

4 设置权限

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

总结

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

相关推荐
旺仔学长 哈哈29 分钟前
Spring Boot 智能停车场管理系统---附源码+数据库文档
数据库·spring boot·后端·智能停车场
ClickHouseDB1 小时前
ClickHouse托管Postgres:OLTP+OLAP,新能力解锁最佳数据平台
java·前端·数据库
数智化管理手记1 小时前
主数据重复、错漏频发?一站式主数据管理平台如何落地?
大数据·运维·数据库·人工智能·数据挖掘
吴声子夜歌1 小时前
MongoDB 4.2——选择片键
数据库·mongodb
天天进步一点点2 小时前
QSqlQuery删除sqlite数据库执行drop数据表报错database table is locked unable to fetch row问题
数据库·oracle·sqlite
音视频工程实战2 小时前
PromptQL 新手入门与实战指南
数据库·sql·算法
清川渡水2 小时前
NL2SQL 的正确打开方式:从「AI 猜 SQL」到「置信度闭环」的工程化落地
数据库·人工智能·sql
TDengine (老段)3 小时前
TDengine Go 与 Rust 连接器 — 高性能异步访问
大数据·数据库·物联网·golang·rust·时序数据库·tdengine
东方佑3 小时前
MA-RMSNorm:打破“缩放换智能”的魔咒,大模型归一化的一次范式革命!
数据库·人工智能·计算机视觉
云和恩墨4 小时前
「云帆计划·长沙站」活动成功举办,云和恩墨与紫薇垣和湖南金悦科技分别签约并授牌,本地伙伴生态建设加速
数据库·科技