微搭低代码MBA 培训管理系统实战 27——快捷功能入口与班级公告展示实现

前情回顾与本节目标
第一步：搭建快捷功能入口
- [1.1 添加快捷功能容器](#1.1 添加快捷功能容器)
- [1.2 添加网格布局](#1.2 添加网格布局)
- [1.3 添加快捷功能项](#1.3 添加快捷功能项)
- [1.4 配置点击事件](#1.4 配置点击事件)
第二步：搭建班级公告区域
- [2.1 添加公告区域容器](#2.1 添加公告区域容器)
- [2.2 添加公告列表](#2.2 添加公告列表)
最终效果
总结

前情回顾与本节目标

在上一节中，我们完成了首页的Banner区域搭建，展示了当前班级和下次课程信息。本节我们将继续完善首页，添加快捷功能入口和班级公告展示区域。

本节核心目标：

快捷功能入口：搭建6个常用功能的快捷入口
班级公告展示：展示班级公告列表
内容绑定：将数据与页面元素进行绑定

第一步：搭建快捷功能入口

1.1 添加快捷功能容器

在Banner区域下方添加容器组件，设置样式：

css 复制代码

/* 快捷功能卡片 */
:root {
  background-color: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  margin: -16px 16px 0 16px;
  padding: 16px;
  position: relative;
  z-index: 1;
}

1.2 添加网格布局

在容器内添加网格布局，设置布局为网格排列，3列布局：

1.3 添加快捷功能项

在列里添加普通容器，里边添加图片组件和文本组件

设置普通容器的布局为纵向排列，水平垂直居中

给图片组件添加一个普通容器，将图片组件移入，设置容器的宽、宽高、圆角、背景色

设置好之后将普通容器复制到其余的6列里

1.4 配置点击事件

为每个快捷功能项配置点击事件，创建自定义方法：

javascript 复制代码

export default function onQuickActionClick({ event, data }) {
  const actionType = data.actionType;
  
  switch(actionType) {
    case 'checkin':
      $w.utils.navigateTo({ pageId: 'checkin' });
      break;
    case 'schedule':
      $w.utils.navigateTo({ pageId: 'learning' });
      break;
    case 'card':
      $w.utils.navigateTo({ pageId: 'learning_card' });
      break;
    case 'homework':
      $w.utils.navigateTo({ pageId: 'homework' });
      break;
    case 'resources':
      $w.utils.navigateTo({ pageId: 'resources' });
      break;
    case 'survey':
      $w.utils.navigateTo({ pageId: 'survey' });
      break;
  }
}

给容器设置点击事件，调用我们的方法，传入入参

第二步：搭建班级公告区域

2.1 添加公告区域容器

在快捷功能下方添加容器组件 ，里边添加普通容器，添加两普通容器，并设置图标和文本组件

设置外层容器的布局为横向排列，两端对齐

内层的普通容器为横向排列，修改图标样式和文本内容

2.2 添加公告列表

在区域内添加数据列表组件，数据模型绑定公告表：

将默认的普通容器删掉，重新添加布局组件，添加普通容器，里边添加两个普通容器，设置布局为横向排列，两端对齐

内层的第一个普通容器里添加一个普通容器和文本组件，设置相应的样式

第一个文本组件的文本内容绑定公告的标题

第二个文本内容绑定表达式，计算是多少天前发布的

bash 复制代码

(() => {
  const h = $w.HourDiff($w.item_listView1.publish_time, $w.Now())
  return h < 1 ? '刚刚' : h < 24 ? `${h}小时前` : `${Math.floor(h/24)}天前`;
})()

最终效果

显示9宫格来进行功能导航，下边显示公告列表信息

总结

本节完成了首页的快捷功能入口和班级公告展示功能：

快捷功能入口：6个常用功能的图标入口
班级公告区域：展示班级公告列表
数据绑定：公告数据与页面元素的绑定

下一节我们将实现班级签到的功能，敬请期待。