前言
在日历中，标记有日记的日期可以帮助用户快速定位已记录的内容。"海风日记"的日历页通过小圆点、加粗字重和点击跳转三种方式，让有日记的日期一目了然。
本文将从源码出发，深入讲解有日记日期的视觉标记和交互逻辑。
一、有日记日期标记
1.1 源码
typescript
// 有日记小圆点
if (this.hasDiary(day) && !this.isToday(day)) {
Circle().width(4).height(4).fill(COLOR_PRIMARY)
}
// 加粗字重
.fontWeight(
this.hasDiary(day) || this.isToday(day) ? FontWeight.Bold : FontWeight.Normal
)
// 点击跳转
.onClick(() => {
if (this.hasDiary(day)) {
router.pushUrl({ url: 'pages/diary/DiaryDetailPage' })
}
})1.2 三种标记方式
| 标记方式 | 实现 | 效果 |
|---|---|---|
| 小圆点 | 4px Circle | 日期下方橙色小点 |
| 加粗字重 | FontWeight.Bold | 日期数字加粗 |
| 点击跳转 | router.pushUrl | 点击进入日记详情 |
二、有日记日期的判断
typescript
private diaryDates: Set<string> = new Set(
MOCK_DIARIES.map(d => d.date)
)
private hasDiary(day: number): boolean {
const key = `${this.curYear}-${String(this.curMonth+1).padStart(2,'0')}-${String(day).padStart(2,'0')}`
return this.diaryDates.has(key)
}三、月统计面板
typescript
Row({ space: 16 }) {
Column({ space: 4 }) {
Text(MOCK_DIARIES.length.toString())
.fontSize(22).fontColor(COLOR_PRIMARY).fontWeight(FontWeight.Bold)
Text('本月日记').fontSize(11).fontColor(COLOR_TEXT_SECONDARY)
}
Divider().vertical(true).height(30).color(COLOR_DIVIDER)
Column({ space: 4 }) {
Text('7').fontSize(22).fontColor(COLOR_AMBER).fontWeight(FontWeight.Bold)
Text('连续天数').fontSize(11).fontColor(COLOR_TEXT_SECONDARY)
}
Divider().vertical(true).height(30).color(COLOR_DIVIDER)
Column({ space: 4 }) {
Text('😊').fontSize(22)
Text('主要心情').fontSize(11).fontColor(COLOR_TEXT_SECONDARY)
}
}四、常见问题
4.1 小圆点与其他标记重叠
问题：今日的橙色圆底和小圆点重叠。
解决方案 ：使用 !this.isToday(day) 条件，今日不显示小圆点。
总结
本文通过"海风日记"的日历页，深入讲解了有日记日期的标记：
- 小圆点：4px 橙色圆点
- 加粗字重：FontWeight.Bold
- 点击跳转：router.pushUrl
- 月统计面板：本月日记数、连续天数、主要心情
下一篇文章将深入讲解 月份切换与年份导航，敬请期待。
如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！
相关资源：