fix(calendar): 优化长跨度选择组件并添加滚动支持

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"

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;

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}