少儿舞蹈小程序(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
   }
}

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

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

整体效果

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

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

总结

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

相关推荐
余道各努力,千里自同风3 小时前
小程序中获取元素节点
前端·小程序
00后程序员张3 小时前
iOS 26 开发者工具推荐,构建高效调试与性能优化工作流
android·ios·性能优化·小程序·uni-app·iphone·webview
计算机学姐4 小时前
基于微信小程序的奶茶店点餐平台【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
性野喜悲4 小时前
<script setup lang=“ts“>+uniapp实现轮播(swiper)效果
前端·javascript·vue.js·小程序·uni-app
2501_916008894 小时前
iOS 26 文件导出与数据分析,多工具组合下的开发者实践指南
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_916008894 小时前
iOS混淆实战用多工具组合把IPA加固做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆
android·ios·小程序·https·uni-app·iphone·webview
weixin_177297220696 小时前
剧本杀小程序开发:如何通过数据驱动提升用户体验?
小程序·ux·剧本杀
sen_shan7 小时前
《微信小程序》第六章:参数定义与管理
微信小程序·小程序
2501_9151063211 小时前
iOS 反编译防护工具与实战组合 从静态侦察到 IPA 成品加固的工程化路径
android·ios·小程序·https·uni-app·iphone·webview