订水商城实战教程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 设置权限

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

总结

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

相关推荐
摇滚侠2 小时前
《On Java 中文版 基础卷》阅读笔记 实现隐藏 12
java·数据库·笔记
川石课堂软件测试2 小时前
学习软件测试需掌握的一些知识
数据库·python·sql·功能测试·网络协议·mysql·http
2501_937767163 小时前
自建 SQL 数据库定时备份踩坑复盘与落地思路
数据库·sql
silvamux_4 小时前
10款模型写种草笔记:可发布性、返工来源与成本数据缺口复盘
java·数据库·笔记
I Am a robert girl6 小时前
从 GameHorizon 拆解多时间尺度游戏评测:数据管线、离线基准与在线回放的三层设计
数据库·游戏·多时间尺度·数据管线·游戏评测·离线基准·在线回放
躺柒6 小时前
读数据安全架构设计与实践17安全架构案例(下)
数据库·安全·零信任·安全架构·防火墙·无边界
SelectDB7 小时前
实时更新排错现场:导入了却查到旧数据,和 FINAL 越加越慢的两条路
大数据·数据库·数据分析
SelectDB7 小时前
拿 Planet 的账单一行行对下来,我总结出三个可自查的校验点
大数据·数据库·数据分析
SelectDB7 小时前
Apache Doris + Vane:让多模态数据进入业务分析
大数据·数据库·数据分析
pjj198549 小时前
ClickHouse 与 Doris 数据库技术梳理:看懂分析型数据库
数据库·clickhouse