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

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

总结

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

相关推荐
Java面试题总结3 分钟前
MongoDB(70)如何使用副本集进行备份?
数据库·mongodb
荒川之神15 分钟前
Oracle LEVEL 函数练习(HR 模式 employees 表)
数据库·oracle
踩着两条虫21 分钟前
VTJ.PRO 在线应用开发平台的术语表
vue.js·低代码·ai编程
TDengine (老段)32 分钟前
TDengine IDMP 工业数据建模 —— 元素与数据查询
大数据·数据库·人工智能·物联网·时序数据库·tdengine·涛思数据
蜡台32 分钟前
Mysql 安装与配置
数据库·mysql
lajidecrd33 分钟前
Ubuntu24安装PostgreSQL和PgVector
数据库·postgresql
羊小猪~~34 分钟前
Redis学习笔记(数据类型、持久化、事件、管道、发布订阅等)
开发语言·数据库·c++·redis·后端·学习·缓存
福娃筱欢40 分钟前
Oracle迁移KES提示ERROR: type “geometry“ does not exist
数据库·oracle
mldlds43 分钟前
使用 Qt 插件和 SQLCipher 实现 SQLite 数据库加密与解密
数据库·qt·sqlite
大空大地20261 小时前
Entity Framework
数据库