From ea5419dfb5b434566ccfe17a566d3001a248f268 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com> Date: Fri, 3 Oct 2025 01:27:50 +0800 Subject: [PATCH] =?UTF-8?q?feat(index):=E4=BC=98=E5=8C=96=E8=BD=AE?= =?UTF-8?q?=E6=92=AD=E5=9B=BE=E8=A7=A6=E6=91=B8=E4=BA=A4=E4=BA=92=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=9E=82=E7=9B=B4=E6=BB=9A=E5=8A=A8-=20=E5=BC=95?= =?UTF-8?q?=E5=85=A5touchStartRef=E8=AE=B0=E5=BD=95=E8=A7=A6=E6=91=B8?= =?UTF-8?q?=E8=B5=B7=E5=A7=8B=E4=BD=8D=E7=BD=AE-=20=E6=96=B0=E5=A2=9Edisab?= =?UTF-8?q?leSwiper=E7=8A=B6=E6=80=81=E6=8E=A7=E5=88=B6=E8=BD=AE=E6=92=AD?= =?UTF-8?q?=E5=9B=BE=E7=A6=81=E7=94=A8=20-=20=E8=AE=BE=E7=BD=AEtouchAction?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E6=94=AF=E6=8C=81=E6=B0=B4=E5=B9=B3=E5=9E=82?= =?UTF-8?q?=E7=9B=B4=E6=BB=91=E5=8A=A8=20-=20=E8=B0=83=E6=95=B4Swiper?= =?UTF-8?q?=E7=BB=84=E4=BB=B6direction=E4=B8=BAhorizontal=20-=E4=B8=BASwip?= =?UTF-8?q?er.Item=E6=B7=BB=E5=8A=A0touchAction=E6=A0=B7=E5=BC=8F=E4=BC=98?= =?UTF-8?q?=E5=8C=96=20-=20=E6=9B=B4=E6=96=B0CSS=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E7=A1=AE=E4=BF=9D=E5=9B=BE=E7=89=87=E7=82=B9=E5=87=BB=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=E6=AD=A3=E5=B8=B8-=20=E6=B7=BB=E5=8A=A0=E8=87=AA?= =?UTF-8?q?=E5=AE=9A=E4=B9=89Swiper=E7=B1=BB=E5=90=8D=E5=8F=8A=E8=A7=A6?= =?UTF-8?q?=E6=91=B8=E6=8E=A7=E5=88=B6=E6=A0=B7=E5=BC=8F=20-=20=E5=90=AF?= =?UTF-8?q?=E7=94=A8-webkit-overflow-scrolling=E6=8F=90=E5=8D=87=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8=E4=BD=93=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/index/Banner.tsx | 22 +++++++++++++------ src/pages/index/Header.tsx | 12 +++++------ src/pages/index/index.scss | 44 ++++++++++++++++++++++++++++++++------ 3 files changed, 59 insertions(+), 19 deletions(-) diff --git a/src/pages/index/Banner.tsx b/src/pages/index/Banner.tsx index b43eed0..32400d4 100644 --- a/src/pages/index/Banner.tsx +++ b/src/pages/index/Banner.tsx @@ -14,6 +14,10 @@ const MyPage = () => { const [hotToday, setHotToday] = useState() const [item, setItem] = useState() 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 ( {/* 左侧轮播图区域 */} - + { 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) => ( - + { lazyLoad={false} style={{ height: `${carouselHeight}px`, - borderRadius: '4px' + borderRadius: '4px', + touchAction: 'manipulation' // 关键修改：优化触摸操作 }} /> @@ -181,4 +191,4 @@ const MyPage = () => { ) } -export default MyPage \ No newline at end of file +export default MyPage diff --git a/src/pages/index/Header.tsx b/src/pages/index/Header.tsx index aa3d897..ec151f8 100644 --- a/src/pages/index/Header.tsx +++ b/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() diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss index bb63e06..403e22a 100644 --- a/src/pages/index/index.scss +++ b/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平台启用硬件加速滚动 */ } \ No newline at end of file