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

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

总结

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

相关推荐
一枚前端小姐姐9 小时前
低代码平台表单设计系统技术分析(实战三)
前端·vue.js·低代码
一枚前端小姐姐11 小时前
低代码平台表单设计系统技术分析(实战二)
低代码·架构·前端框架
爱可生开源社区12 小时前
2026 年,优秀的 DBA 需要具备哪些素质?
数据库·人工智能·dba
一枚前端小姐姐14 小时前
低代码平台表单设计系统架构分析(实战一)
前端·低代码·架构
随逸17716 小时前
《从零搭建NestJS项目》
数据库·typescript
加号31 天前
windows系统下mysql多源数据库同步部署
数据库·windows·mysql
シ風箏1 天前
MySQL【部署 04】Docker部署 MySQL8.0.32 版本(网盘镜像及启动命令分享)
数据库·mysql·docker
李慕婉学姐1 天前
Springboot智慧社区系统设计与开发6n99s526(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
数据库·spring boot·后端
百锦再1 天前
Django实现接口token检测的实现方案
数据库·python·django·sqlite·flask·fastapi·pip
tryCbest1 天前
数据库SQL学习
数据库·sql