少儿舞蹈小程序（12）作品列表查询搭建

前言

上一篇我们在首页搭建了作品与活动展示功能，点击视频的时候可以播放，点击图片的时候可以全屏预览。

但是作品只是按照类别进行了展示，每个类别只显示了一个作品。为了让家长看到更多的作品，需要单独提供一个作品浏览的页面，原型如下：

在顶部列出所有分类，点击分类的时候可以进行过滤。

分类下边以双列的形式展示作品，同时展示作品的浏览量和点赞量。本节我们介绍一下具体的开发过程。

1 创建页面

打开我们的小程序应用

点击创建页面的图标

输入标题

回到首页，选中更多按钮，设置点击事件

方法选择打开页面

页面选择作品展示

这样配置之后，点击按钮的时候就可以跳转到作品展示页面

2 搭建顶部导航

在页面组件中添加布局组件，模板选择灰色

修改标题为作品与活动，右侧的文本内容改为🔍

需要覆盖一下默认的背景色，输入如下样式

:scope .wd-layout__header {background: linear-gradient(135deg, var(--primary-light), var(--primary-color));color: white;
}

3 搭建分类查询

在卡片内容里添加标签选择组件

输入标签项，这里需要注意的是我们的全部其实是不在枚举项里的，所以我们输入999

其余的保持和枚举值一样

关闭显示标题配置

4 搭建双列布局

查询条件下边是我们的内容区域，这块可以通过数据列表来搭建布局。在标签选择组件下边添加数据列表组件，选择列表模板和数据模型

在数据列表里将图片组件复制一份，绑定为缩略图字段

配置图片组件的条件展示，一个是类型等于图片的时候显示，一个是类型是视频的时候显示

4.1 搭建视频标识

当作品的类型是视频的时候，我们需要在右上角显示一个视频的字样。在图片外层添加一个普通容器，设置定位为相对定位

添加一个文本组件，设置文本内容📹 视频

设置文本的样式为

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

4.2 搭建流览量

在第二个文本组件修改文本内容

`👁️ ${$w.item_listView1.views||0}  ❤️ ${$w.item_listView1.likes||0}`

4.3 播放视频

当点击缩略图的时候，我们需要打开一个弹窗来播放视频。选中页面组件，添加弹窗组件

里边添加视频播放组件

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

设置点击缩略图的时候打开弹窗，并且传入所在行的视频地址字段

5 按照类别过滤数据

布局搭建好之后，我们要让查询条件和数据列表进行联动。当点击查询条件的时候，要按照类别过滤数据。

这里有个问题是类别里我们并没有一个叫全部的，这种可以让查询条件赋值为undefined解决

先创建一个自定义变量用来保存查询条件


创建一个自定义方法，用来设置查询条件的值

输入如下代码

export default function({event, data}) {const condition = $w.tagSelect1.valueconsole.log(condition)if(condition=="999"){$w.page.dataset.state.category = undefined}else{$w.page.dataset.state.category = condition}
}

设置标签选择的值改变事件，选择我们的自定义方法

还有就是一开始的时候，需要把变量赋值为undefined

整体效果

在首页点击更多的时候跳转到作品列表页面


点击查询条件，可以进行过滤

总结

本篇我们带着大家搭建了作品列表页面，讲解了标签选择和数据列表组件的使用。标签选择可以方便的设置像分类这种有固定值的查询条件，而数据列表不仅可以加载数据，通过设置模板就可以搭建出我们需要的布局来。下一篇我们介绍一下阅读量累加及点赞的功能，敬请期待。