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