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

前情回顾与本节目标

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

本节核心目标：

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

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

1.1 添加快捷功能容器

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

/* 快捷功能卡片 */:root{background-color:#ffffff;border-radius:16px;box-shadow:0 2px 8pxrgba(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 配置点击事件

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

exportdefaultfunctiononQuickActionClick({event,data}){constactionType=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 添加公告列表

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

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

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

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

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

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

最终效果

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

总结

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

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

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