fix(home): 修复箭头无限循环+日期框竖长型+宜忌放大框+月历横向
Publish Mini Program Dev Version / publish (push) Successful in 3m10s

1. 箭头放到大框里面,点击不触发swiper无限循环
2. 日期框改为竖长型(min-height 800rpx)
3. 宜忌放到大框里面,包含日期/农历/干支/节日/星期/宜忌
4. 月历确认横向滑动(vertical=false)
This commit is contained in:
gouki
2026-08-08 14:51:53 +00:00
parent 63bcd9f412
commit 0bd92a43bf
3 changed files with 157 additions and 179 deletions
+14 -2
View File
@@ -159,14 +159,26 @@ Page({
prevDay() {
if (this.data.dayIndex > 0) {
this.setData({ dayIndex: this.data.dayIndex - 1 });
this.onDaySwiperChange({ detail: { current: this.data.dayIndex - 1 } });
this.updateCurrentDayInfo();
}
},
nextDay() {
if (this.data.dayIndex < this.data.dayList.length - 1) {
this.setData({ dayIndex: this.data.dayIndex + 1 });
this.onDaySwiperChange({ detail: { current: this.data.dayIndex + 1 } });
this.updateCurrentDayInfo();
}
},
/** 更新当前 dayInfo(不触发 swiper 事件) */
updateCurrentDayInfo() {
const cur = this.data.dayList[this.data.dayIndex];
if (cur) {
this.setData({
dayInfo: cur.dayInfo,
currentYear: cur.dayInfo.solarYear,
currentMonth: cur.dayInfo.solarMonth
});
}
},
+55 -56
View File
@@ -24,71 +24,74 @@
<scroll-view class="day-scroll" scroll-y>
<view class="container">
<!-- 大日历卡片 -->
<view class="almanac-card {{dayItem.legalHoliday ? 'is-holiday' : (dayItem.workday ? 'is-workday' : 'is-weekend')}}" bindtap="openZoom" data-type="detail" data-date="{{dayItem.key}}">
<!-- 顶部:公历 -->
<!-- 大日历卡片(竖长型,包含日期/农历/干支/宜忌) -->
<view class="almanac-card {{dayItem.legalHoliday ? 'is-holiday' : (dayItem.workday ? 'is-workday' : 'is-weekend')}}">
<!-- 顶部:公历年月 + 标签 -->
<view class="almanac-head">
<view class="almanac-head-left">
<text class="almanac-year">{{dayItem.dayInfo.solarYear}}年{{dayItem.dayInfo.solarMonth}}月</text>
</view>
<text class="almanac-year">{{dayItem.dayInfo.solarYear}}年{{dayItem.dayInfo.solarMonth}}月</text>
<view class="head-tags">
<text class="today-tag" wx:if="{{dayItem.dayInfo.isToday}}">今日</text>
<text class="lunar-tag" wx:if="{{dayItem.isFirstOrFifteen}}">{{dayItem.dayInfo.lunarDay === 1 ? '初一' : '十五'}}</text>
</view>
</view>
<!-- 大日期(老黄历方框,包含农历和干支 -->
<view class="almanac-day-row" catchtap="noop">
<view class="day-frame {{dayItem.legalHoliday ? 'frame-holiday' : (dayItem.workday ? 'frame-workday' : 'frame-weekend')}}">
<view class="day-frame-inner">
<view class="almanac-day-num font-chinese {{dayItem.legalHoliday ? 'num-holiday' : (dayItem.workday ? 'num-workday' : 'num-weekend')}}">{{dayItem.dayInfo.solarDay}}</view>
<view class="day-frame-lunar">
<text class="day-frame-lunar-main font-chinese">{{dayItem.dayInfo.lunarMonthName}}{{dayItem.dayInfo.lunarDayName}}</text>
<text class="day-frame-lunar-sub">{{dayItem.dayInfo.lunarYearGanzhi}}年 {{dayItem.dayInfo.lunarMonthGanzhi}}月 {{dayItem.dayInfo.lunarDayGanzhi}}日</text>
<!-- 大日期方框(竖长型,包含所有信息 -->
<view class="day-frame {{dayItem.legalHoliday ? 'frame-holiday' : (dayItem.workday ? 'frame-workday' : 'frame-weekend')}}">
<!-- 左箭头(在大框里面) -->
<view class="day-arrow-inner left" catchtap="prevDay"></view>
<!-- 中间内容 -->
<view class="day-frame-content">
<!-- 大日期 -->
<view class="almanac-day-num font-chinese {{dayItem.legalHoliday ? 'num-holiday' : (dayItem.workday ? 'num-workday' : 'num-weekend')}}">{{dayItem.dayInfo.solarDay}}</view>
<!-- 农历 -->
<view class="day-frame-lunar">
<text class="day-frame-lunar-main font-chinese">{{dayItem.dayInfo.lunarMonthName}}{{dayItem.dayInfo.lunarDayName}}</text>
<text class="day-frame-lunar-sub">{{dayItem.dayInfo.lunarYearGanzhi}}年 {{dayItem.dayInfo.lunarMonthGanzhi}}月 {{dayItem.dayInfo.lunarDayGanzhi}}日</text>
</view>
<!-- 节日/节气 -->
<view class="day-frame-fest" wx:if="{{dayItem.legalHoliday || dayItem.dayInfo.lunarFestival || dayItem.dayInfo.solarFestival || dayItem.dayInfo.solarTerm}}">
<text class="frame-badge frame-badge-holiday" wx:if="{{dayItem.legalHoliday}}">{{dayItem.legalHoliday}}</text>
<text class="frame-badge frame-badge-festival" wx:if="{{dayItem.dayInfo.lunarFestival && !dayItem.legalHoliday}}">{{dayItem.dayInfo.lunarFestival}}</text>
<text class="frame-badge frame-badge-festival" wx:if="{{dayItem.dayInfo.solarFestival && !dayItem.legalHoliday}}">{{dayItem.dayInfo.solarFestival}}</text>
<text class="frame-badge frame-badge-term" wx:if="{{dayItem.dayInfo.solarTerm}}">{{dayItem.dayInfo.solarTerm}}{{dayItem.termTime ? ' ' + dayItem.termTime : ''}}</text>
</view>
<!-- 星期 + 工作日 -->
<view class="day-frame-week">
星期{{dayItem.dayInfo.weekDay}} · {{dayItem.legalHoliday ? dayItem.legalHoliday + ' · 放假' : (dayItem.workday ? '工作日 · 上班' : '周末 · 休息')}}
</view>
<!-- 宜忌(在大框里面) -->
<view class="day-frame-yiji">
<view class="frame-yiji-row">
<view class="frame-yiji-title yi">宜</view>
<view class="frame-yiji-items">
<text class="frame-yiji-item yi" wx:for="{{dayItem.almanac.recommends}}" wx:key="*this">{{item}}</text>
</view>
</view>
<view class="frame-yiji-row">
<view class="frame-yiji-title ji">忌</view>
<view class="frame-yiji-items">
<text class="frame-yiji-item ji" wx:for="{{dayItem.almanac.avoids}}" wx:key="*this">{{item}}</text>
</view>
</view>
</view>
</view>
<!-- 右箭头(在大框里面) -->
<view class="day-arrow-inner right" catchtap="nextDay"></view>
</view>
<!-- 节日/节气(固定高度,空着也占位) -->
<view class="almanac-fest">
<text class="badge badge-holiday" wx:if="{{dayItem.legalHoliday}}">{{dayItem.legalHoliday}}</text>
<text class="badge badge-festival" wx:if="{{dayItem.dayInfo.lunarFestival && !dayItem.legalHoliday}}">{{dayItem.dayInfo.lunarFestival}}</text>
<text class="badge badge-festival" wx:if="{{dayItem.dayInfo.solarFestival && !dayItem.legalHoliday}}">{{dayItem.dayInfo.solarFestival}}</text>
<text class="badge badge-term" wx:if="{{dayItem.dayInfo.solarTerm}}">{{dayItem.dayInfo.solarTerm}}{{dayItem.termTime ? ' ' + dayItem.termTime : ''}}</text>
</view>
<!-- 佛历提醒(固定高度,空着也占位) -->
<view class="buddhist-tip">
<text class="buddhist-text" wx:if="{{dayItem.showBuddhist && dayItem.nextBuddhist}}" catchtap="noop">🪷 距 {{dayItem.nextBuddhist.name}} 还有 {{dayItem.nextBuddhist.daysLeft}} 天({{dayItem.nextBuddhist.solarDate}}</text>
</view>
<!-- 星期 + 工作日/节假日提示 -->
<view class="day-type-tip {{dayItem.legalHoliday ? 'tip-holiday' : (dayItem.workday ? 'tip-workday' : 'tip-weekend')}}">
星期{{dayItem.dayInfo.weekDay}} · {{dayItem.legalHoliday ? dayItem.legalHoliday + ' · 放假' : (dayItem.workday ? '工作日 · 上班' : '周末 · 休息')}}
<!-- 佛历提醒 -->
<view class="buddhist-tip" wx:if="{{dayItem.showBuddhist && dayItem.nextBuddhist}}">
<text class="buddhist-text">🪷 距 {{dayItem.nextBuddhist.name}} 还有 {{dayItem.nextBuddhist.daysLeft}} 天({{dayItem.nextBuddhist.solarDate}}</text>
</view>
</view>
<!-- 宜忌(点击放大) -->
<view class="card yiji-card" bindtap="openZoom" data-type="yiji" data-date="{{dayItem.key}}">
<view class="yiji-row">
<view class="yiji-col">
<view class="yiji-title yi">宜</view>
<view class="yiji-items">
<text class="yiji-item yi" wx:for="{{dayItem.almanac.recommends}}" wx:key="*this">{{item}}</text>
</view>
</view>
<view class="yiji-divider"></view>
<view class="yiji-col">
<view class="yiji-title ji">忌</view>
<view class="yiji-items">
<text class="yiji-item ji" wx:for="{{dayItem.almanac.avoids}}" wx:key="*this">{{item}}</text>
</view>
</view>
</view>
</view>
<!-- 黄历详情(点击放大) -->
<!-- 黄历详情 -->
<view class="card" bindtap="openZoom" data-type="detail" data-date="{{dayItem.key}}">
<view class="detail-grid">
<view class="detail-item">
@@ -136,17 +139,13 @@
</scroll-view>
</swiper-item>
</swiper>
<!-- 左右箭头(固定在 swiper 最左最右) -->
<view class="day-arrow-fixed left" bindtap="prevDay"></view>
<view class="day-arrow-fixed right" bindtap="nextDay"></view>
</view>
<!-- 月历视图:swiper 上下/左右动换月 -->
<!-- 月历视图:swiper 左右动换月 -->
<view class="page-body month-body" wx:if="{{viewMode === 'month'}}" style="padding-top: {{statusBarHeight + navBarHeight}}px;">
<view class="month-header">
<text class="month-title font-chinese">{{currentYear}}年{{currentMonth}}月</text>
<text class="month-hint">上下或左右滑动换月</text>
<text class="month-hint">左右滑动换月</text>
</view>
<view class="grid grid-cols-7 week-head">
<view class="text-center week-cell" wx:for="{{weekHeaders}}" wx:key="*this">{{item}}</view>
+88 -121
View File
@@ -70,32 +70,6 @@
padding-bottom: 40rpx;
}
/* 固定左右箭头 */
.day-arrow-fixed {
position: fixed;
top: 50%;
transform: translateY(-50%);
font-size: 72rpx;
color: #C9B8A6;
z-index: 50;
width: 80rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}
.day-arrow-fixed.left {
left: 10rpx;
}
.day-arrow-fixed.right {
right: 10rpx;
}
/* ===== 老黄历大日历卡片 ===== */
.almanac-card {
border-radius: 24rpx;
@@ -128,6 +102,7 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
}
.almanac-year {
@@ -157,41 +132,65 @@
border-radius: 999rpx;
}
/* 大日期 */
.almanac-day-row {
display: flex;
align-items: center;
justify-content: center;
margin: 16rpx 0;
}
/* 老黄历方框(包含农历和干支) */
/* 大日期方框(竖长型,包含所有信息) */
.day-frame {
min-width: 480rpx;
padding: 32rpx 40rpx;
display: flex;
align-items: center;
justify-content: center;
align-items: stretch;
justify-content: space-between;
border: 6rpx solid;
border-radius: 16rpx;
background: #FFFDF8;
box-shadow: inset 0 0 0 4rpx #FFFDF8, inset 0 0 0 6rpx currentColor;
padding: 24rpx 16rpx;
min-height: 800rpx;
}
.day-frame-inner {
.frame-holiday { border-color: #C41E3A; color: #C41E3A; }
.frame-workday { border-color: #2E7D32; color: #2E7D32; }
.frame-weekend { border-color: #C41E3A; color: #C41E3A; }
/* 箭头(在大框里面,竖向居中) */
.day-arrow-inner {
display: flex;
align-items: center;
justify-content: center;
font-size: 64rpx;
color: #C9B8A6;
width: 60rpx;
flex-shrink: 0;
}
.day-arrow-inner.left {
border-right: 1rpx solid #F0E6DA;
}
.day-arrow-inner.right {
border-left: 1rpx solid #F0E6DA;
}
/* 中间内容(竖向排列) */
.day-frame-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 16rpx;
justify-content: center;
gap: 20rpx;
padding: 0 16rpx;
}
.almanac-day-num {
font-size: 180rpx;
font-size: 200rpx;
font-weight: 700;
line-height: 1;
text-align: center;
}
.num-holiday { color: #C41E3A; }
.num-workday { color: #2E7D32; }
.num-weekend { color: #C41E3A; }
/* 农历 */
.day-frame-lunar {
display: flex;
flex-direction: column;
@@ -202,7 +201,7 @@
}
.day-frame-lunar-main {
font-size: 40rpx;
font-size: 44rpx;
font-weight: 600;
color: #1A1A1A;
}
@@ -212,134 +211,102 @@
color: #9E8E7E;
}
.frame-holiday { border-color: #C41E3A; color: #C41E3A; }
.frame-workday { border-color: #2E7D32; color: #2E7D32; }
.frame-weekend { border-color: #C41E3A; color: #C41E3A; }
.num-holiday { color: #C41E3A; }
.num-workday { color: #2E7D32; }
.num-weekend { color: #C41E3A; }
/* 节日(固定高度占位) */
.almanac-fest {
/* 节日/节气 */
.day-frame-fest {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 12rpx;
margin-bottom: 12rpx;
min-height: 52rpx;
}
.badge-holiday {
background: #C41E3A;
color: #FFFFFF;
.frame-badge {
font-size: 24rpx;
padding: 6rpx 24rpx;
border-radius: 999rpx;
}
.badge-festival {
.frame-badge-holiday {
background: #C41E3A;
color: #FFFFFF;
}
.badge-term {
.frame-badge-festival {
background: #C41E3A;
color: #FFFFFF;
}
.frame-badge-term {
background: #2E7D32;
color: #FFFFFF;
}
/* 佛历提醒(固定高度占位) */
.buddhist-tip {
text-align: center;
padding: 12rpx;
margin-bottom: 8rpx;
min-height: 50rpx;
display: flex;
align-items: center;
justify-content: center;
}
.buddhist-text {
/* 星期 + 工作日 */
.day-frame-week {
font-size: 26rpx;
color: #B8860B;
}
/* 星期 + 工作日/节假日提示 */
.day-type-tip {
text-align: center;
font-size: 28rpx;
font-weight: 600;
padding: 12rpx;
border-radius: 12rpx;
margin-top: 8rpx;
color: #6B5E53;
text-align: center;
}
.tip-holiday {
color: #C41E3A;
background: rgba(196, 30, 58, 0.08);
}
.tip-workday {
color: #2E7D32;
background: rgba(46, 125, 50, 0.08);
}
.tip-weekend {
color: #C41E3A;
background: rgba(196, 30, 58, 0.08);
}
/* 宜忌 */
.yiji-card {
position: relative;
}
.yiji-row {
/* 宜忌(在大框里面) */
.day-frame-yiji {
width: 100%;
display: flex;
flex-direction: column;
gap: 16rpx;
padding-top: 20rpx;
border-top: 2rpx solid #F0E6DA;
}
.yiji-col {
flex: 1;
.frame-yiji-row {
display: flex;
gap: 16rpx;
align-items: flex-start;
}
.yiji-divider {
width: 1rpx;
background: #F0E6DA;
margin: 0 16rpx;
}
.yiji-title {
.frame-yiji-title {
width: 56rpx;
height: 56rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-size: 28rpx;
font-weight: 700;
flex-shrink: 0;
}
.yiji-title.yi { background: #C41E3A; color: #FFFFFF; }
.yiji-title.ji { background: #546E7A; color: #FFFFFF; }
.frame-yiji-title.yi { background: #C41E3A; color: #FFFFFF; }
.frame-yiji-title.ji { background: #546E7A; color: #FFFFFF; }
.yiji-items {
.frame-yiji-items {
flex: 1;
display: flex;
flex-wrap: wrap;
gap: 8rpx;
align-content: flex-start;
}
.yiji-item {
font-size: 26rpx;
padding: 4rpx 14rpx;
.frame-yiji-item {
font-size: 24rpx;
padding: 4rpx 12rpx;
border-radius: 8rpx;
}
.yiji-item.yi { background: #FEF2F2; color: #C41E3A; }
.yiji-item.ji { background: #F1F5F9; color: #546E7A; }
.frame-yiji-item.yi { background: #FEF2F2; color: #C41E3A; }
.frame-yiji-item.ji { background: #F1F5F9; color: #546E7A; }
/* 佛历提醒 */
.buddhist-tip {
text-align: center;
padding: 16rpx 12rpx 0;
}
.buddhist-text {
font-size: 26rpx;
color: #B8860B;
}
.section-title {
font-size: 28rpx;