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

目录前情回顾与本节目标第一步搭建快捷功能入口1.1 添加快捷功能容器1.2 添加网格布局1.3 添加快捷功能项1.4 配置点击事件第二步搭建班级公告区域2.1 添加公告区域容器2.2 添加公告列表最终效果总结前情回顾与本节目标在上一节中我们完成了首页的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}){constactionTypedata.actionType;switch(actionType){casecheckin:$w.utils.navigateTo({pageId:checkin});break;caseschedule:$w.utils.navigateTo({pageId:learning});break;casecard:$w.utils.navigateTo({pageId:learning_card});break;casehomework:$w.utils.navigateTo({pageId:homework});break;caseresources:$w.utils.navigateTo({pageId:resources});break;casesurvey:$w.utils.navigateTo({pageId:survey});break;}}给容器设置点击事件调用我们的方法传入入参第二步搭建班级公告区域2.1 添加公告区域容器在快捷功能下方添加容器组件里边添加普通容器添加两普通容器并设置图标和文本组件设置外层容器的布局为横向排列两端对齐内层的普通容器为横向排列修改图标样式和文本内容2.2 添加公告列表在区域内添加数据列表组件数据模型绑定公告表将默认的普通容器删掉重新添加布局组件添加普通容器里边添加两个普通容器设置布局为横向排列两端对齐内层的第一个普通容器里添加一个普通容器和文本组件设置相应的样式第一个文本组件的文本内容绑定公告的标题第二个文本内容绑定表达式计算是多少天前发布的((){ const h$w.HourDiff($w.item_listView1.publish_time,$w.Now())returnh1?刚刚:h24?${h}小时前:${Math.floor(h/24)}天前;})()最终效果显示9宫格来进行功能导航下边显示公告列表信息总结本节完成了首页的快捷功能入口和班级公告展示功能快捷功能入口6个常用功能的图标入口班级公告区域展示班级公告列表数据绑定公告数据与页面元素的绑定下一节我们将实现班级签到的功能敬请期待。