当前位置：首页 > news >正文

少儿舞蹈小程序（11）作品与活动展示

news 2025/9/10 7:53:19

前言

上一篇我们已经实现了作品与活动后台管理功能，并且录入了数据。有了数据之后就可以考虑作品的展示了，先看一下原型：
在这里插入图片描述
原型的话我们是要显示作品四个类别，每个类别展示一个作品。如果是视频的可以点击打开播放器，如果是图片的可以全屏预览。本节我们介绍一下具体的开发过程。

1 调用API

我们在上篇已经搭建了后端的API，按照类别提取了对应的作品的数据。有了后端的API就需要在页面上调用。打开我们的小程序应用
在这里插入图片描述
在代码区点击+号

选择新建外部APIs查询

选择机构管理，方法选择获取作品信息

点击运行就可以看到作品的数据

2 搭建页面布局

有了API之后，就需要搭建页面的布局，我们先搭建标题。因为标题的样式和我们机构介绍的是一样的，就无需重复搭建了。选择机构介绍的容器，右键进行克隆
在这里插入图片描述
克隆之后他是复制到里边了，点击右键选择移到上级

然后右键点击移到最后，这样就调整好了位置

修改文本内容，改为🎬 作品与活动

接着就是展示作品信息，作品我们目是有四个，通常小程序受制于屏幕大小限制，只能显示两个。这时候就需要通过滚动容器来显示。在标题下添加滚动容器，基础属性打开允许横向滚动
在这里插入图片描述
设置滚动容器的高度为170px

里边添加一个普通容器作为我们的内容，设置布局为横向排列

里边添加一个循环展示组件

绑定我们的API的数据

循环展示组件里添加普通容器，设置宽高各为150px

里边添加两个普通容器，都放置图片组件
在这里插入图片描述

第一个普通容器绑定条件展示，当类型是图片的时候显示
在这里插入图片描述
第二个普通容器绑定条件展示，当类型是视频的时候展示

第一个图片的地址从循环对象里绑定图片字段

第二个图片绑定缩略图字段

设置第一个图片的布局模式为裁剪填满，打开预览打开大图配置

宽和高设置各位150px，8px的圆角
在这里插入图片描述
第二个图片设置方法相同，只是缩略图不用打卡点击预览大图

3 播放视频

我们现在视频只是显示了缩略图，并不能播放。所以我们通过点击缩略图要打开一个弹窗，实现自动播放视频的需求。在页面组件下添加一个弹窗组件
在这里插入图片描述
里边添加一个视频播放组件

绑定视频资源，绑定为弹窗的入参

关闭弹窗默认打开状态，关闭底部按钮

在缩略图点击的时候打开弹窗

传入视频的地址字段

为了让视频和图片有个区分，我们需要在右上角显示一个标识，添加一个文本组件，修改文本内容为📹 视频
在这里插入图片描述
设置文本组件的样式

:root {position: absolute;top: var(--spacing-sm);right: var(--spacing-sm);background: rgba(0, 0, 0, 0.6);color: white;padding: var(--spacing-xs) var(--spacing-sm);border-radius: var(--border-radius-base);font-size: var(--font-size-xs);
}

设置文本的父容器的定位为相对定位
在这里插入图片描述

4 显示分类

除了图片和右上角的标识，在图片的底部还需要显示分类名称，也是通过绝对定位来设置。先添加文本组件
在这里插入图片描述
文本内容绑定为分类名称字段

设置样式

:root {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));color: white;padding: var(--spacing-base);font-size: var(--font-size-sm);
}