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

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

总结

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

相关推荐
wgzrmlrm749 小时前
如何加固SQL环境部署_删除默认安装的示例数据库
jvm·数据库·python
雨墨✘10 小时前
golang如何实现设备指纹识别_golang设备指纹识别实现详解
jvm·数据库·python
程序员大辉10 小时前
没想到!一直要开会员的Navicat 终于有免费版了
数据库
数厘10 小时前
2.15 sql基础查询(SELECT、FROM、字段别名、常量与表达式)
数据库·sql·oracle
可观测性用观测云10 小时前
观测云数据转发和存档最佳实践
数据库
披着羊皮不是狼10 小时前
(7)为 RAG 系统接入 Redis Stack 实现向量持久化
数据库·redis·缓存
SelectDB11 小时前
基于 SelectDB 实现 Hive 数据湖统一分析:洋钱罐全球一体化探索分析平台升级实践
大数据·数据库·数据分析
飞yu流星11 小时前
mysql 基础
数据库·mysql·oracle
零陵上将军_xdr11 小时前
MySQL 事务写入流程详解
android·数据库·mysql
若阳安好11 小时前
【提效小工具】IN SQL、UPDATE SQL、INSERT SQL
java·数据库·sql