feat(index):优化轮播图触摸交互支持垂直滚动- 引入touchStartRef记录触摸起始位置- 新增disableSwiper状态控制轮播图禁用

- 设置touchAction样式支持水平垂直滑动
- 调整Swiper组件direction为horizontal
-为Swiper.Item添加touchAction样式优化
- 更新CSS样式确保图片点击事件正常- 添加自定义Swiper类名及触摸控制样式
- 启用-webkit-overflow-scrolling提升滚动体验

src/pages/index/Banner.tsx

@@ -14,6 +14,10 @@ const MyPage = () => {
   const [hotToday, setHotToday] = useState<CmsAd>()
   const [item, setItem] = useState<CmsArticle>()
   const [loading, setLoading] = useState(true)
+  // const [disableSwiper, setDisableSwiper] = useState(false)
+
+  // 用于记录触摸开始位置
+  // const touchStartRef = useRef({x: 0, y: 0})
 
   // 加载数据
   const loadData = async () => {
@@ -98,7 +102,10 @@ const MyPage = () => {
   return (
     <View className="flex p-2 justify-between" style={{height: `${carouselHeight}px`}}>
       {/* 左侧轮播图区域 */}
-      <View style={{width: '50%', height: '100%'}} className="banner-swiper-container">
+      <View
+        style={{width: '50%', height: '100%'}}
+        className="banner-swiper-container"
+      >
         <Swiper
           defaultValue={0}
           height={carouselHeight}
@@ -106,13 +113,15 @@ const MyPage = () => {
           autoPlay
           duration={3000}
           style={{
-            height: `${carouselHeight}px`
+            height: `${carouselHeight}px`,
+            touchAction: 'pan-y' // 关键修改：允许垂直滑动
           }}
           disableTouch={false}
-          touchAngle={"45"} // 关键修改：设置触摸角度阈值
+          direction="horizontal"
+          className="custom-swiper"
         >
           {carouselData && carouselData?.imageList?.map((img, index) => (
-            <Swiper.Item key={index}>
+            <Swiper.Item key={index} style={{ touchAction: 'pan-x pan-y' }}>
               <Image
                 width="100%"
                 height="100%"
@@ -122,7 +131,8 @@ const MyPage = () => {
                 lazyLoad={false}
                 style={{
                   height: `${carouselHeight}px`,
-                  borderRadius: '4px'
+                  borderRadius: '4px',
+                  touchAction: 'manipulation' // 关键修改：优化触摸操作
                 }}
               />
             </Swiper.Item>
@@ -181,4 +191,4 @@ const MyPage = () => {
   )
 }
 
-export default MyPage
+export default MyPage

src/pages/index/Header.tsx

@@ -13,7 +13,7 @@ import {View,Text} from '@tarojs/components'
 import MySearch from "./MySearch";
 import './Header.scss';
 
-const Header = (props: any) => {
+const Header = (_: any) => {
   // 使用新的useShopInfo Hook
   const {
     getWebsiteName,
@@ -174,11 +174,11 @@ const Header = (props: any) => {
   }
 
   // 获取小程序系统信息
-  const getSystemInfo = () => {
-    const systemInfo = Taro.getSystemInfoSync()
-    // 状态栏高度 + 导航栏高度 (一般为44px)
-    return (systemInfo.statusBarHeight || 0) + 44
-  }
+  // const getSystemInfo = () => {
+  //   const systemInfo = Taro.getSystemInfoSync()
+  //   // 状态栏高度 + 导航栏高度 (一般为44px)
+  //   return (systemInfo.statusBarHeight || 0) + 44
+  // }
 
   useEffect(() => {
     reload().then()

src/pages/index/index.scss

@@ -19,23 +19,27 @@ page {
   }
 }
 
-/* 轮播图容器样式，确保不阻止页面滚动 */
+/* 轮播图容器样式，确保支持两种滑动操作 */
 .banner-swiper-container {
-  touch-action: pan-y !important;
+  touch-action: pan-y !important; /* 允许垂直滑动 */
   
   .nut-swiper {
-    touch-action: pan-y !important;
-    pointer-events: none; // 关键修改：禁用Swiper的指针事件
+    touch-action: pan-y !important; /* 允许垂直滑动 */
     
     .nut-swiper-item {
-      touch-action: pan-y !important;
-      pointer-events: none; // 关键修改：禁用Swiper Item的指针事件
+      touch-action: pan-x pan-y !important; /* 允许水平和垂直滑动 */
       
       image {
-        pointer-events: auto; // 重新启用图片的指针事件，以便点击功能正常
+        pointer-events: auto; /* 确保图片点击事件正常 */
+        touch-action: manipulation; /* 优化触摸操作 */
       }
     }
   }
+  
+  /* 为Swiper容器添加特殊处理 */
+  .nut-swiper--horizontal {
+    touch-action: pan-y !important; /* 允许垂直滑动 */
+  }
 }
 
 /* 吸顶状态下的样式 */
@@ -43,4 +47,30 @@ page {
   .header-bg {
     height: 100%;
   }
+}
+
+/* 为Swiper添加更精确的触摸控制 */
+.nut-swiper {
+  touch-action: pan-y !important;
+  
+  .nut-swiper-inner {
+    touch-action: pan-x pan-y !important;
+  }
+}
+
+/* 自定义Swiper样式 */
+.custom-swiper {
+  touch-action: pan-y !important;
+  
+  .nut-swiper-item {
+    touch-action: pan-x pan-y !important;
+  }
+}
+
+/* 确保Swiper内部元素不会阻止页面滚动 */
+.banner-swiper-container,
+.custom-swiper,
+.nut-swiper,
+.nut-swiper-item {
+  -webkit-overflow-scrolling: touch; /* iOS平台启用硬件加速滚动 */
 }