目录
- 前情回顾与本节目标
- 第一步：搭建快捷功能入口
-
- [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个常用功能的图标入口
- 班级公告区域：展示班级公告列表
- 数据绑定：公告数据与页面元素的绑定
下一节我们将实现班级签到的功能，敬请期待。