feat(home): 修复swiper动画、宜忌布局、月历显示、节日速查
Build and Publish Server / build (push) Successful in 2m8s
Publish Mini Program Dev Version / publish (push) Failing after 11m17s

1. 修复swiper箭头点击动画丢失问题
   - 改用固定7天窗口,滑动到边缘时整体滚动数据
   - 保持dayIndex连续,确保swiper平滑动画

2. 修复宜忌两行显示压在一起
   - 设置item固定高度32rpx和行距12rpx
   - 超出2行显示...省略号

3. 修复月历数字竖向排列问题
   - 修正wxml嵌套结构,让42个格子正确排成6行7列
   - 压缩格子高度,放大数字字体

4. 节日速查功能优化
   - 默认显示3条,右侧添加更多
This commit is contained in:
gouki
2026-08-10 23:07:47 +00:00
parent 52c0d3c774
commit 2a68eae999
23 changed files with 2140 additions and 87 deletions
+100 -33
View File
@@ -18,6 +18,7 @@
class="day-swiper"
current="{{dayIndex}}"
bindchange="onDaySwiperChange"
bindanimationfinish="onDaySwiperFinish"
duration="300"
circular="{{false}}"
>
@@ -92,46 +93,75 @@
</view>
</view>
<!-- 黄历详情 -->
<!-- 黄历详情(紧凑布局,每行2个) -->
<view class="card" bindtap="openZoom" data-type="detail" data-date="{{dayItem.key}}">
<view class="detail-grid">
<view class="detail-item">
<view class="detail-grid-compact">
<view class="detail-item-compact">
<text class="detail-label">值神</text>
<text class="detail-value">{{dayItem.almanac.duty}}</text>
</view>
<view class="detail-item">
<view class="detail-item-compact">
<text class="detail-label">黄道</text>
<text class="detail-value">{{dayItem.almanac.twelveStar.name}}{{dayItem.almanac.twelveStar.ecliptic}}</text>
</view>
<view class="detail-item">
<view class="detail-item-compact">
<text class="detail-label">二十八宿</text>
<text class="detail-value">{{dayItem.almanac.twentyEightStar.name}}</text>
</view>
<view class="detail-item">
<view class="detail-item-compact">
<text class="detail-label">六曜</text>
<text class="detail-value">{{dayItem.almanac.sixStar}}</text>
</view>
<view class="detail-item">
<view class="detail-item-compact">
<text class="detail-label">冲煞</text>
<text class="detail-value">冲{{dayItem.almanac.clash}} 煞{{dayItem.almanac.evilDirection}}</text>
</view>
<view class="detail-item">
<view class="detail-item-compact">
<text class="detail-label">彭祖百忌</text>
<text class="detail-value">{{dayItem.almanac.pengZu}}</text>
</view>
</view>
</view>
<!-- 节日速查 -->
<view class="card" bindtap="openZoom" data-type="fest" data-date="{{dayItem.key}}">
<view class="section-title">节日速查</view>
<view class="fest-quick">
<view class="fest-quick-item" wx:for="{{dayItem.upcoming}}" wx:key="name" catchtap="goFestival" data-date="{{item.solarDate}}">
<!-- 节日速查(默认显示3条,点击查看更多) -->
<view class="card">
<view class="fest-head">
<text class="section-title">节日速查</text>
<text class="fest-more" bindtap="openZoom" data-type="fest-year" data-date="{{dayItem.key}}">更多 >></text>
</view>
<view class="fest-quick" wx:if="{{dayItem.upcoming.length > 0}}">
<view class="fest-quick-item" wx:for="{{dayItem.upcoming.slice(0, 3)}}" wx:key="name" catchtap="goFestival" data-date="{{item.solarDate}}">
<text class="fest-name">{{item.name}}</text>
<text class="fest-date">{{item.solarMonth}}月{{item.solarDay}}日</text>
<text class="fest-left {{item.daysLeft === 0 ? 'is-today' : ''}}">{{item.daysLeft === 0 ? '今天' : item.daysLeft + '天后'}}</text>
</view>
</view>
<view class="fest-empty" wx:else>暂无近期节日</view>
</view>
<!-- 历史上的今天(数据来源:中文维基百科) -->
<view class="card otd-card" wx:if="{{dayItem.otd}}">
<view class="otd-head">
<text class="section-title">历史上的今天</text>
<view class="otd-tabs">
<text class="otd-tab {{dayItem.otdTab === 'event' ? 'active' : ''}}" catchtap="switchOtdTab" data-date="{{dayItem.key}}" data-tab="event">大事记</text>
<text class="otd-tab {{dayItem.otdTab === 'birth' ? 'active' : ''}}" catchtap="switchOtdTab" data-date="{{dayItem.key}}" data-tab="birth">出生</text>
</view>
</view>
<view class="otd-list">
<view class="otd-item" wx:for="{{dayItem.otdTab === 'event' ? dayItem.otd.eventsPreview : dayItem.otd.birthsPreview}}" wx:key="id" wx:for-item="ev">
<text class="otd-year" wx:if="{{ev.yearText}}">{{ev.yearText}}</text>
<text class="otd-text {{ev.yearText ? '' : 'no-year'}}">{{ev.content}}</text>
</view>
</view>
<view class="otd-foot">
<text class="otd-source">来源:中文维基百科</text>
<text class="otd-more" bindtap="openZoom" data-type="otd" data-date="{{dayItem.key}}">查看完整 </text>
</view>
</view>
<view class="card placeholder-card" wx:elif="{{dayItem.otdLoading}}">
<view class="section-title">历史上的今天</view>
<view class="placeholder-content">加载中…</view>
</view>
<!-- 回今天 -->
@@ -162,26 +192,22 @@
<swiper-item wx:for="{{monthList}}" wx:key="key">
<scroll-view scroll-y class="month-scroll">
<view class="grid grid-cols-7 month-grid">
<view
class="day-cell {{d.isToday ? 'today' : ''}} {{d.solarMonth !== item.month ? 'other-month' : ''}}"
wx:for="{{item.weeks}}"
wx:for-item="week"
wx:key="week"
>
<block wx:for="{{week}}" wx:for-item="d" wx:key="solarDate">
<view
class="day-cell-inner {{d.isToday ? 'today' : ''}} {{d.solarMonth !== item.month ? 'other-month' : ''}}"
bindtap="selectDay"
data-date="{{d.solarDate}}"
>
<text class="day-number">{{d.solarDay}}</text>
<text class="day-lunar {{d.lunarFestival || d.solarFestival ? 'festival' : ''}}">
{{d.lunarFestival || d.solarFestival || d.lunarDayName}}
</text>
<view class="day-dot" wx:if="{{d.isTermDay}}"></view>
</view>
</block>
</view>
<block wx:for="{{item.weeks}}" wx:for-item="week" wx:key="index">
<view
class="day-cell-inner {{d.isToday ? 'today' : ''}} {{d.solarMonth !== item.month ? 'other-month' : ''}}"
wx:for="{{week}}"
wx:for-item="d"
wx:key="solarDate"
bindtap="selectDay"
data-date="{{d.solarDate}}"
>
<text class="day-number">{{d.solarDay}}</text>
<text class="day-lunar {{d.lunarFestival || d.solarFestival ? 'festival' : ''}}">
{{d.lunarFestival || d.solarFestival || d.lunarDayName}}
</text>
<view class="day-dot" wx:if="{{d.isTermDay}}"></view>
</view>
</block>
</view>
</scroll-view>
</swiper-item>
@@ -264,5 +290,46 @@
<text class="zoom-fest-left {{item.daysLeft === 0 ? 'is-today' : ''}}">{{item.daysLeft === 0 ? '今天' : '还有' + item.daysLeft + '天'}}</text>
</view>
</scroll-view>
<!-- 今年节日(字体稍小,避免溢出) -->
<scroll-view scroll-y class="zoom-body" wx:if="{{zoomType === 'fest-year' && zoomData}}">
<view class="zoom-fest-year-row" wx:for="{{zoomData.yearFestivals}}" wx:key="name" bindtap="goFestival" data-date="{{item.solarDate}}">
<text class="zoom-fest-year-name">{{item.name}}</text>
<text class="zoom-fest-year-date">{{item.solarMonth}}月{{item.solarDay}}日</text>
<text class="zoom-fest-year-type {{item.type === 'lunar' ? 'lunar' : 'solar'}}">{{item.type === 'lunar' ? '农历' : '公历'}}</text>
</view>
</scroll-view>
<!-- 历史上的今天放大 -->
<scroll-view scroll-y class="zoom-body" wx:if="{{zoomType === 'otd' && zoomData}}">
<block wx:if="{{zoomData.events.length}}">
<view class="zoom-otd-title">大事记</view>
<view class="zoom-otd-item" wx:for="{{zoomData.events}}" wx:key="id">
<text class="otd-year" wx:if="{{item.yearText}}">{{item.yearText}}</text>
<text class="otd-text {{item.yearText ? '' : 'no-year'}}">{{item.content}}</text>
</view>
</block>
<block wx:if="{{zoomData.births.length}}">
<view class="zoom-otd-title">出生</view>
<view class="zoom-otd-item" wx:for="{{zoomData.births}}" wx:key="id">
<text class="otd-year" wx:if="{{item.yearText}}">{{item.yearText}}</text>
<text class="otd-text {{item.yearText ? '' : 'no-year'}}">{{item.content}}</text>
</view>
</block>
<block wx:if="{{zoomData.deaths.length}}">
<view class="zoom-otd-title">逝世</view>
<view class="zoom-otd-item" wx:for="{{zoomData.deaths}}" wx:key="id">
<text class="otd-year" wx:if="{{item.yearText}}">{{item.yearText}}</text>
<text class="otd-text {{item.yearText ? '' : 'no-year'}}">{{item.content}}</text>
</view>
</block>
<block wx:if="{{zoomData.festivals.length}}">
<view class="zoom-otd-title">节假日与习俗</view>
<view class="zoom-otd-item" wx:for="{{zoomData.festivals}}" wx:key="id">
<text class="otd-text no-year">{{item.content}}</text>
</view>
</block>
<view class="zoom-otd-source">数据来源:中文维基百科(CC BY-SA 4.0</view>
</scroll-view>
</view>
</view>