From de65dd3767b39ffe9b933de4b536e83ed931ae47 Mon Sep 17 00:00:00 2001
From: zhujiruo <zhujiruo@foxmail.com>
Date: Sun, 27 Apr 2025 17:28:26 +0800
Subject: [PATCH] =?UTF-8?q?fix(calendar):=20=E4=BC=98=E5=8C=96=E9=95=BF?=
 =?UTF-8?q?=E8=B7=A8=E5=BA=A6=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6=E5=B9=B6?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=BB=9A=E5=8A=A8=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 LongSpan 组件中添加 ScrollView 组件，实现滚动功能
- 调整长跨度选择界面布局，优化用户体验
- 修复了一些样式问题，包括月份选择按钮样式和弹窗样式
---
 .../calendar/components/longSpan/index.tsx    | 81 ++++++++++---------
 packages/vantui/src/calendar/index.less       |  7 ++
 packages/vantui/src/calendar/index.tsx        |  3 +-
 3 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/packages/vantui/src/calendar/components/longSpan/index.tsx b/packages/vantui/src/calendar/components/longSpan/index.tsx
index 6eee9276e..d6c75e137 100644
--- a/packages/vantui/src/calendar/components/longSpan/index.tsx
+++ b/packages/vantui/src/calendar/components/longSpan/index.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, useMemo } from 'react'
-import { View } from '@tarojs/components'
+import { ScrollView, View } from '@tarojs/components'
 import { Button } from '../../../button'
 
 type IProps = {
@@ -70,45 +70,46 @@ export function LongSpan(props: IProps) {
   return (
     <View className="van-calendar-longspan">
       <View className="van-calendar__header-title">切换年月</View>
-
-      <View className="van-calendar-longspan-title">年份选择</View>
-      <View className="van-calendar-longspan-box">
-        {data.map((item, index) => (
-          <Button
-            plain={item.year === currentYear ? false : true}
-            hairline={item.year === currentYear ? false : true}
-            type="primary"
-            key={`longspan-year-item${index}`}
-            className="van-calendar-longspan-item"
-            onClick={() => {
-              if (currentYear !== item.year) {
-                setCurrentYear(item.year)
-                setMonthData(item.month)
-                setCurrentIndex(item.month[0]?.index)
-              }
-            }}
-          >
-            {item.year}年
-          </Button>
-        ))}
-      </View>
-      <View className="van-calendar-longspan-title">月选择</View>
-      <View className="van-calendar-longspan-box">
-        {monthData.map((item) => (
-          <Button
-            plain={item.index === currentIndex ? false : true}
-            hairline={item.index === currentIndex ? false : true}
-            type="primary"
-            key={`longspan-year-item-m${item.index}`}
-            className="van-calendar-longspan-item"
-            onClick={() => {
-              setCurrentIndex(item.index)
-            }}
-          >
-            {item.name}月
-          </Button>
-        ))}
-      </View>
+      <ScrollView scrollY className="van-calendar-longspan-content">
+        <View className="van-calendar-longspan-title">年份选择</View>
+        <View className="van-calendar-longspan-box">
+          {data.map((item, index) => (
+            <Button
+              plain={item.year === currentYear ? false : true}
+              hairline={item.year === currentYear ? false : true}
+              type="primary"
+              key={`longspan-year-item${index}`}
+              className="van-calendar-longspan-item"
+              onClick={() => {
+                if (currentYear !== item.year) {
+                  setCurrentYear(item.year)
+                  setMonthData(item.month)
+                  setCurrentIndex(item.month[0]?.index)
+                }
+              }}
+            >
+              {item.year}年
+            </Button>
+          ))}
+        </View>
+        <View className="van-calendar-longspan-title">月选择</View>
+        <View className="van-calendar-longspan-box">
+          {monthData.map((item) => (
+            <Button
+              plain={item.index === currentIndex ? false : true}
+              hairline={item.index === currentIndex ? false : true}
+              type="primary"
+              key={`longspan-year-item-m${item.index}`}
+              className="van-calendar-longspan-item"
+              onClick={() => {
+                setCurrentIndex(item.index)
+              }}
+            >
+              {item.name}月
+            </Button>
+          ))}
+        </View>
+      </ScrollView>
       <Button
         block
         type="primary"
diff --git a/packages/vantui/src/calendar/index.less b/packages/vantui/src/calendar/index.less
index f69981d89..795db9946 100644
--- a/packages/vantui/src/calendar/index.less
+++ b/packages/vantui/src/calendar/index.less
@@ -55,6 +55,7 @@
     .theme(line-height, '@calendar-confirm-button-line-height') !important;
   }
 }
+
 /* stylelint-disable-next-line */
 .van-calendar {
   &__header {
@@ -92,6 +93,7 @@
     .theme(line-height, '@calendar-weekdays-height');
   }
 }
+
 /* stylelint-disable-next-line */
 .van-calendar {
   display: flex;
@@ -230,6 +232,11 @@
     font-weight: bold;
   }
 
+  .van-calendar-longspan-content {
+    height: calc(100% - 200px);
+    overflow: auto;
+  }
+
   .van-calendar-longspan-box {
     display: flex;
     flex-direction: row;
diff --git a/packages/vantui/src/calendar/index.tsx b/packages/vantui/src/calendar/index.tsx
index 52e683416..5209b6064 100644
--- a/packages/vantui/src/calendar/index.tsx
+++ b/packages/vantui/src/calendar/index.tsx
@@ -591,8 +591,7 @@ function Index(
   }
 
   return (
-    // @ts-ignore
-    <View catchMove={poppable}>
+    <View>
       {poppable ? (
         <VanPopup
           className={'van-calendar__popup--' + position}