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

前言
[1 创建页面](#1 创建页面)
[2 搭建顶部导航](#2 搭建顶部导航)
[3 搭建分类查询](#3 搭建分类查询)
[4 搭建双列布局](#4 搭建双列布局)
- [4.1 搭建视频标识](#4.1 搭建视频标识)
- [4.2 搭建流览量](#4.2 搭建流览量)
- [4.3 播放视频](#4.3 播放视频)
[5 按照类别过滤数据](#5 按照类别过滤数据)
整体效果
总结

前言

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

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

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

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

1 创建页面

打开我们的小程序应用

点击创建页面的图标

输入标题

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

方法选择打开页面

页面选择作品展示

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

2 搭建顶部导航

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

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

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

bash 复制代码

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

3 搭建分类查询

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

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

其余的保持和枚举值一样

关闭显示标题配置

4 搭建双列布局

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

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

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

4.1 搭建视频标识

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

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

设置文本的样式为

bash 复制代码

: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 搭建流览量

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

bash 复制代码

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

4.3 播放视频

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

里边添加视频播放组件

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

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

5 按照类别过滤数据

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

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

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

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

输入如下代码

bash 复制代码

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

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