feat(商品列表): 实现商品列表吸顶效果和分享功能- 添加 Tabs 粘性布局组件，实现吸顶效果- 新增商品分享功能，支持分享给好友

-优化商品列表展示样式，使用瀑布流布局
- 调整商品图片展示方式和点击跳转逻辑- 添加空状态提示，改善用户体验
-修复部分样式问题，提升页面美观度- 移除旧版订单列表相关代码和依赖- 更新页面结构，提高组件复用性
- 添加系统信息获取，适配不同设备屏幕
-优化页面滚动体验，解决滑动冲突问题

src/pages/index/Banner.tsx

@@ -152,8 +152,8 @@ const MyPage = () => {
               hotToday?.imageList?.map(item => (
                 <View className={'item flex flex-col mr-1'} key={item.url}>
                   <Image
-                    width={70}
-                    height={70}
+                    width={60}
+                    height={60}
                     src={item.url}
                     mode={'scaleToFill'}
                     lazyLoad={false}

src/pages/index/BestSellers.tsx

@@ -1,70 +1,39 @@
 import {useEffect, useState} from "react";
-import {Image, Swiper, SwiperItem, Empty} from '@nutui/nutui-react-taro'
+import {Image, Tabs, Empty, Sticky} from '@nutui/nutui-react-taro'
 import {Share} from '@nutui/icons-react-taro'
 import {View, Text} from '@tarojs/components';
 import Taro from "@tarojs/taro";
-import {Tabs} from '@nutui/nutui-react-taro'
 import {ShopGoods} from "@/api/shop/shopGoods/model";
 import {pageShopGoods} from "@/api/shop/shopGoods";
 
-
-const BestSellers = () => {
+const BestSellers = (props: {onStickyChange?: (isSticky: boolean) => void}) => {
   const [tab1value, setTab1value] = useState<string | number>('0')
   const [list, setList] = useState<ShopGoods[]>([])
-  const [goods, setGoods] = useState<ShopGoods | null>(null)
-  // 轮播图固定高度，可根据需求调整
-  const SWIPER_HEIGHT = 180;
+  const [goods, setGoods] = useState<ShopGoods>()
+  const [stickyStatus, setStickyStatus] = useState<boolean>(false)
 
   const reload = () => {
     pageShopGoods({}).then(res => {
-      const processGoodsItem = (item: ShopGoods) => {
-        const pics: string[] = [];
-        // 添加主图
-        if (item.image) {
-          pics.push(item.image);
-        }
-        // 处理附加图片
-        if (item.files) {
-          try {
-            // 解析文件字符串为对象
-            const files = typeof item.files === "string"
-              ? JSON.parse(item.files)
-              : item.files;
-
-            // 收集所有图片URL
-            Object.values(files).forEach(file => {
-              if (file?.url) {
-                pics.push(file.url);
-              }
-            });
-          } catch (error) {
-            console.error('解析文件失败:', error);
-          }
-        }
-        // 返回新对象，避免直接修改原对象
-        return {...item, pics};
-      };
-
-      // 处理商品列表
-      const goods = (res?.list || []).map(processGoodsItem);
-      setList(goods);
-    }).catch(err => {
-      console.error('获取商品列表失败:', err);
-    });
+      setList(res?.list || []);
+    })
   }
 
   // 处理分享点击
   const handleShare = (item: ShopGoods) => {
     setGoods(item);
 
+    console.log(goods)
+
     // 显示分享选项菜单
     Taro.showActionSheet({
       itemList: ['分享给好友'],
       success: (res) => {
         if (res.tapIndex === 0) {
+          // 分享给好友 - 触发转发
           Taro.showShareMenu({
             withShareTicket: true,
             success: () => {
+              // 提示用户点击右上角分享
               Taro.showToast({
                 title: '请点击右上角分享给好友',
                 icon: 'none',
@@ -80,136 +49,126 @@ const BestSellers = () => {
     });
   }
 
-  useEffect(() => {
-    reload();
-  }, []);
+  // 处理粘性布局状态变化
+  const onStickyChange = (isSticky: boolean) => {
+    setStickyStatus(isSticky)
+    // 通知父组件粘性状态变化
+    props.onStickyChange?.(isSticky)
+    console.log('Tabs 粘性状态:', isSticky ? '已固定' : '取消固定')
+  }
 
-  // 配置分享内容
-  Taro.useShareAppMessage(() => {
-    if (goods) {
-      return {
-        title: goods.name,
-        path: `/shop/goodsDetail/index?id=${goods.goodsId}`,
-        imageUrl: goods.image || ''
-      };
-    }
-    return {
-      title: '热销商品',
-      path: '/pages/index/index'
-    };
-  });
+  // 获取小程序系统信息
+  const getSystemInfo = () => {
+    const systemInfo = Taro.getSystemInfoSync()
+    // 状态栏高度 + 导航栏高度 (一般为44px)
+    return (systemInfo.statusBarHeight || 0) + 44
+  }
+
+  useEffect(() => {
+    reload()
+  }, [])
 
   return (
-    <View className={'py-3'}>
-      <View className={'flex flex-col justify-between items-center rounded-lg px-2'}>
-        <Tabs
-          value={tab1value}
-          className={'w-full'}
-          onChange={(value) => {
-            setTab1value(value)
-          }}
+    <>
+      <View className={'py-3'} style={{paddingTop: '0'}}>
+        {/* Tabs粘性布局组件 */}
+        <Sticky
+          threshold={getSystemInfo()}
+          onChange={onStickyChange}
           style={{
-            backgroundColor: '#fff',
+            zIndex: 999,
+            backgroundColor: stickyStatus ? '#ffffff' : 'transparent',
+            boxShadow: stickyStatus ? '0 2px 8px rgba(0,0,0,0.1)' : 'none',
+            transition: 'all 0.3s ease',
+            marginTop: stickyStatus ? '0' : '-12px'
           }}
-          activeType="smile"
         >
-          <Tabs.TabPane title="今日主推">
-          </Tabs.TabPane>
-          <Tabs.TabPane title="即将到期">
-          </Tabs.TabPane>
-          <Tabs.TabPane title="活动预告">
-          </Tabs.TabPane>
-        </Tabs>
-
-        {tab1value == '0' && list?.map((item) => (
-          <View
-            key={item.goodsId || item.id}  // 使用商品唯一ID作为key
-            className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}
+          <Tabs
+            value={tab1value}
+            className={'w-full'}
+            onChange={(value) => {
+              setTab1value(value)
+            }}
+            style={{
+              backgroundColor: 'transparent',
+              paddingTop: stickyStatus ? '0' : '8px',
+              paddingBottom: stickyStatus ? '8px' : '0',
+            }}
+            activeType="smile"
           >
-            {/* 轮播图组件 */}
-            {item.pics && item.pics.length > 0 ? (
-              <Swiper
-                defaultValue={0}
-                height={SWIPER_HEIGHT}
-                indicator
-                className="swiper-container"
-                autoPlay
-                interval={3000}
-              >
-                {item.pics.map((pic, picIndex) => (
-                  <SwiperItem key={picIndex}>
-                    <Image
-                      radius="12px 12px 0 0"
-                      height={SWIPER_HEIGHT}
-                      src={pic}
-                      mode={'aspectFill'}  // 使用aspectFill保持比例并填充容器
-                      lazyLoad
-                      onClick={() => Taro.navigateTo({
-                        url: `/shop/goodsDetail/index?id=${item.goodsId}`
-                      })}
-                      className="swiper-image"
-                    />
-                  </SwiperItem>
-                ))}
-              </Swiper>
-            ) : (
-              // 没有图片时显示占位图
-              <View className="no-image-placeholder" style={{height: `${SWIPER_HEIGHT}px`}}>
-                <Text className="placeholder-text">暂无图片</Text>
-              </View>
-            )}
+            <Tabs.TabPane title="今日主推">
+            </Tabs.TabPane>
+            <Tabs.TabPane title="即将到期">
+            </Tabs.TabPane>
+            <Tabs.TabPane title="活动预告">
+            </Tabs.TabPane>
+          </Tabs>
+        </Sticky>
 
-            <View className={'flex flex-col p-2 rounded-lg'}>
-              <View>
-                <View className={'car-no text-sm'}>{item.name}</View>
-                <View className={'flex justify-between text-xs py-1'}>
-                  <Text className={'text-orange-500'}>{item.comments}</Text>
-                  <Text className={'text-gray-400'}>已售 {item.sales}</Text>
-                </View>
-                <View className={'flex justify-between items-center py-2'}>
-                  <View className={'flex text-red-500 text-xl items-baseline'}>
-                    <Text className={'text-xs'}>￥</Text>
-                    <Text className={'font-bold text-2xl'}>{item.price}</Text>
-                  </View>
-                  <View className={'buy-btn'}>
-                    <View className={'cart-icon flex items-center hidden'}>
-                      <View
-                        className={'flex flex-col justify-center items-center text-white px-3 gap-1 text-nowrap whitespace-nowrap cursor-pointer'}
-                        onClick={() => handleShare(item)}
-                      >
-                        <Share size={20}/>
+        <View className={'flex flex-col justify-between items-center rounded-lg px-2 mt-2'}>
+          {/* 今日主推 */}
+          {tab1value == '0' && list?.map((item, index) => {
+            return (
+              <View key={index} className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}>
+                <Image src={item.image} mode={'aspectFit'} lazyLoad={false}
+                       radius="10px 10px 0 0" height="180"
+                       onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/>
+                <View className={'flex flex-col p-2 rounded-lg'}>
+                  <View>
+                    <View className={'car-no text-sm'}>{item.name}</View>
+                    <View className={'flex justify-between text-xs py-1'}>
+                      <Text className={'text-orange-500'}>{item.comments}</Text>
+                      <Text className={'text-gray-400'}>已售 {item.sales}</Text>
+                    </View>
+                    <View className={'flex justify-between items-center py-2'}>
+                      <View className={'flex text-red-500 text-xl items-baseline'}>
+                        <Text className={'text-xs'}>￥</Text>
+                        <Text className={'font-bold text-2xl'}>{item.price}</Text>
+                      </View>
+                      <View className={'buy-btn'}>
+                        <View className={'cart-icon items-center hidden'}>
+                          <View
+                            className={'flex flex-col justify-center items-center text-white px-3 gap-1 text-nowrap whitespace-nowrap cursor-pointer'}
+                            onClick={() => handleShare(item)}
+                          >
+                            <Share size={20}/>
+                          </View>
+                        </View>
+                        <Text className={'text-white pl-4 pr-5'}
+                              onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>购买
+                        </Text>
                       </View>
                     </View>
-                    <Text
-                      className={'text-white pl-5 pr-5'}
-                      onClick={() => Taro.navigateTo({
-                        url: `/shop/goodsDetail/index?id=${item.goodsId}`
-                      })}
-                    >
-                      购买
-                    </Text>
                   </View>
                 </View>
               </View>
-            </View>
-          </View>
-        ))}
+            )
+          })}
 
-        {
-          tab1value == '1' && <Empty description="暂无相关商品" style={{
-            background: 'transparent',
-          }}/>
-        }
-
-        {
-          tab1value == '2' && <Empty description="暂无相关商品" style={{
-            background: 'transparent',
-          }}/>
-        }
+          {/* 即将到期 */}
+          {tab1value == '1' && (
+            <Empty
+              size={'small'}
+              description="暂无即将到期的商品"
+              style={{
+                background: 'transparent',
+              }}
+            />
+          )}
 
+          {/* 活动预告 */}
+          {tab1value == '2' && (
+            <Empty
+              size={'small'}
+              description="暂无活动预告"
+              style={{
+                background: 'transparent',
+              }}
+            />
+          )}
+        </View>
       </View>
-    </View>
+    </>
   )
 }
-
 export default BestSellers

src/pages/index/GoodsList.tsx

@@ -1,14 +1,15 @@
 import {useEffect, useState} from "react";
-import {Image} from '@nutui/nutui-react-taro'
-import {Share} from '@nutui/icons-react-taro'
-import Taro from '@tarojs/taro'
+import {Image, Tabs, Empty, Sticky} from '@nutui/nutui-react-taro'
+import {View, Text} from '@tarojs/components';
+import Taro from "@tarojs/taro";
 import {ShopGoods} from "@/api/shop/shopGoods/model";
 import {pageShopGoods} from "@/api/shop/shopGoods";
-import './GoodsList.scss'
+import './GoodsList.scss';
 
-
-const BestSellers = () => {
+const GoodsList = (props: {onStickyChange?: (isSticky: boolean) => void}) => {
+  const [tab1value, setTab1value] = useState<string | number>('0')
   const [list, setList] = useState<ShopGoods[]>([])
+  const [stickyStatus, setStickyStatus] = useState<boolean>(false)
 
   const reload = () => {
     pageShopGoods({}).then(res => {
@@ -16,52 +17,127 @@ const BestSellers = () => {
     })
   }
 
+  // 处理粘性布局状态变化
+  const onStickyChange = (isSticky: boolean) => {
+    setStickyStatus(isSticky)
+    // 通知父组件粘性状态变化
+    props.onStickyChange?.(isSticky)
+    console.log('Tabs 粘性状态:', isSticky ? '已固定' : '取消固定')
+  }
+
+  // 获取小程序系统信息
+  const getSystemInfo = () => {
+    const systemInfo = Taro.getSystemInfoSync()
+    // 状态栏高度 + 导航栏高度 (一般为44px)
+    return (systemInfo.statusBarHeight || 0) + 44
+  }
+
   useEffect(() => {
     reload()
   }, [])
 
   return (
     <>
-      <div className={'py-3'}>
-        <div className={'flex flex-wrap justify-between items-start rounded-lg px-2'}>
-          {list?.map((item, index) => {
-            return (
-              <div key={index} className={'flex flex-col rounded-lg bg-white shadow-sm mb-5'} style={{
-                width: '48%'
-              }}>
-                <Image src={item.image} mode={'scaleToFill'} lazyLoad={false}
-                       radius="10px 10px 0 0" height="180"
-                       onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/>
-                <div className={'flex flex-col p-2 rounded-lg'}>
-                  <div>
-                    <div className={'car-no text-sm'}>{item.name}</div>
-                    <div className={'flex justify-between text-xs py-1'}>
-                      <span className={'text-orange-500'}>{item.comments}</span>
-                      <span className={'text-gray-400'}>已售 {item.sales}</span>
-                    </div>
-                    <div className={'flex justify-between items-center py-2'}>
-                      <div className={'flex text-red-500 text-xl items-baseline'}>
-                        <span className={'text-xs'}>￥</span>
-                        <span className={'font-bold text-2xl'}>{item.price}</span>
-                      </div>
-                      <div className={'buy-btn'}>
-                        <div className={'cart-icon'}>
-                          <Share size={20} className={'mx-4 mt-2'}
-                                 onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}/>
-                        </div>
-                        <div className={'text-white pl-4 pr-5'}
-                             onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}>购买
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </div>
+      <View className={'py-3'} style={{paddingTop: '0'}}>
+        {/* Tabs粘性布局组件 */}
+        <Sticky
+          threshold={getSystemInfo()}
+          onChange={onStickyChange}
+          style={{
+            zIndex: 999,
+            backgroundColor: stickyStatus ? '#ffffff' : 'transparent',
+            boxShadow: stickyStatus ? '0 2px 8px rgba(0,0,0,0.1)' : 'none',
+            transition: 'all 0.3s ease',
+            marginTop: stickyStatus ? '0' : '-12px'
+          }}
+        >
+          <Tabs
+            value={tab1value}
+            className={'w-full'}
+            onChange={(value) => {
+              setTab1value(value)
+            }}
+            style={{
+              backgroundColor: 'transparent',
+              paddingTop: stickyStatus ? '0' : '8px',
+              paddingBottom: stickyStatus ? '8px' : '0',
+            }}
+            activeType="smile"
+          >
+            <Tabs.TabPane title="今日主推">
+            </Tabs.TabPane>
+            <Tabs.TabPane title="即将到期">
+            </Tabs.TabPane>
+            <Tabs.TabPane title="活动预告">
+            </Tabs.TabPane>
+          </Tabs>
+        </Sticky>
+
+        <View className={'bg-gray-50'}>
+          {/* 今日主推 - 瀑布流布局 */}
+          {tab1value == '0' && (
+            <View className={'grid grid-cols-2 gap-2 pb-2 p-2 '}>
+              {list?.map((item, index) => {
+                return (
+                  <View key={index} className={'goods-waterfall-item bg-white'} style={{
+                    borderRadius: '0 0 6px 6px'
+                  }}>
+                    <View className={'goods-card'}>
+                      <Image
+                        src={item.image}
+                        lazyLoad={false}
+                        style={{
+                          borderRadius: '6px 6px 0 0',
+                          height: '180px'
+                        }}
+                        onClick={() => Taro.navigateTo({url: '/shop/goodsDetail/index?id=' + item.goodsId})}
+                      />
+                      <View className={'goods-info p-2 flex flex-col'}>
+                        <View className={'goods-title text-sm font-bold'}>{item.name}</View>
+                        <View className={'goods-meta'}>
+                          <Text className={'goods-comments text-gray-400 text-xs'}>{item.comments}</Text>
+                        </View>
+                        <View className={'goods-price-section flex justify-between'}>
+                          <View className={'goods-price'}>
+                            <Text className={'price-unit text-orange-600 font-bold text-lg'}>￥</Text>
+                            <Text className={'price-number text-orange-600 font-bold text-lg'}>{item.price}</Text>
+                          </View>
+                          <View className={'goods-actions'}>
+                            <Text className={'goods-sales text-gray-400 text-xs'}>已售 {item.sales}</Text>
+                          </View>
+                        </View>
+                      </View>
+                    </View>
+                  </View>
+                )
+              })}
+            </View>
+          )}
+
+          {/* 即将到期 */}
+          {tab1value == '1' && (
+            <Empty
+              size={'small'}
+              description="暂无即将到期的商品"
+              style={{
+                background: 'transparent',
+              }}
+            />
+          )}
+
+          {/* 活动预告 */}
+          {tab1value == '2' && (
+            <Empty
+              size={'small'}
+              description="暂无活动预告"
+              style={{
+                background: 'transparent',
+              }}
+            />
+          )}
+        </View>
+      </View>
     </>
   )
 }
-export default BestSellers
+export default GoodsList

src/pages/index/Header.scss

@@ -14,3 +14,10 @@
   position: absolute;
   z-index: 0;
 }
+
+/* 吸顶状态下的样式 */
+.nutui-sticky--fixed {
+  .header-bg {
+    height: 100%;
+  }
+}

src/pages/index/Header.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useState} from "react";
 import Taro from '@tarojs/taro';
-import {Button, Space} from '@nutui/nutui-react-taro'
+import {Button, Space, Sticky} from '@nutui/nutui-react-taro'
 import {TriangleDown} from '@nutui/icons-react-taro'
 import {Avatar, NavBar} from '@nutui/nutui-react-taro'
 import {getUserInfo, getWxOpenId} from "@/api/layout";
@@ -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,
@@ -22,6 +22,7 @@ const Header = (props: any) => {
 
   const [IsLogin, setIsLogin] = useState<boolean>(true)
   const [statusBarHeight, setStatusBarHeight] = useState<number>()
+  const [stickyStatus, setStickyStatus] = useState<boolean>(false)
 
   const reload = async () => {
     Taro.getSystemInfo({
@@ -166,49 +167,76 @@ const Header = (props: any) => {
     })
   }
 
+  // 处理粘性布局状态变化
+  const onStickyChange = (isSticky: boolean) => {
+    setStickyStatus(isSticky)
+    console.log('Header 粘性状态:', isSticky ? '已固定' : '取消固定')
+  }
+
+  // 获取小程序系统信息
+  // const getSystemInfo = () => {
+  //   const systemInfo = Taro.getSystemInfoSync()
+  //   // 状态栏高度 + 导航栏高度 (一般为44px)
+  //   return (systemInfo.statusBarHeight || 0) + 44
+  // }
+
   useEffect(() => {
     reload().then()
   }, [])
 
   return (
     <>
-      <View className={'fixed top-0 header-bg'} style={{
-        height: !props.stickyStatus ? '180px' : 'auto',
-        paddingBottom: '12px'
-      }}>
-        <MySearch statusBarHeight={statusBarHeight} />
-        {/*{!props.stickyStatus && <MySearch done={reload}/>}*/}
-      </View>
-      <NavBar
-        style={{marginTop: `${statusBarHeight}px`, marginBottom: '0px', backgroundColor: 'transparent'}}
-        onBackClick={() => {
+      <Sticky
+        threshold={0}
+        onChange={onStickyChange}
+        style={{
+          zIndex: 1000,
+          backgroundColor: stickyStatus ? '#03605c' : 'transparent',
+          transition: 'background-color 0.3s ease',
         }}
-        left={
-          !IsLogin ? (
-            <View style={{display: 'flex', alignItems: 'center'}}>
-              <Button style={{color: '#ffffff'}} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
-                <Space>
-                  <Avatar
-                    size="22"
-                    src={getWebsiteLogo()}
-                  />
-                  <Text style={{color: '#ffffff'}}>{getWebsiteName()}</Text>
-                  <TriangleDown size={9} className={'text-white'}/>
-                </Space>
-              </Button>
-            </View>
-          ) : (
-            <View style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
-              <Avatar
-                size="22"
-                src={getWebsiteLogo()}
-              />
-              <Text className={'text-white'}>{getWebsiteName()}</Text>
-              <TriangleDown className={'text-white'} size={9}/>
-            </View>
-          )}>
-        {/*<QRLoginButton />*/}
-      </NavBar>
+      >
+        <View className={'header-bg'} style={{
+          height: !stickyStatus ? '180px' : `${(statusBarHeight || 0) + 44}px`,
+          paddingBottom: !stickyStatus ? '12px' : '0px'
+        }}>
+          {/* 只在非吸顶状态下显示搜索框 */}
+          {!stickyStatus && <MySearch statusBarHeight={statusBarHeight} />}
+        </View>
+        <NavBar
+          style={{
+            marginTop: `${statusBarHeight}px`,
+            marginBottom: '0px',
+            backgroundColor: 'transparent'
+          }}
+          onBackClick={() => {
+          }}
+          left={
+            !IsLogin ? (
+              <View style={{display: 'flex', alignItems: 'center'}}>
+                <Button style={{color: '#ffffff'}} open-type="getPhoneNumber" onGetPhoneNumber={handleGetPhoneNumber}>
+                  <Space>
+                    <Avatar
+                      size="22"
+                      src={getWebsiteLogo()}
+                    />
+                    <Text style={{color: '#ffffff'}}>{getWebsiteName()}</Text>
+                    <TriangleDown size={9} className={'text-white'}/>
+                  </Space>
+                </Button>
+              </View>
+            ) : (
+              <View style={{display: 'flex', alignItems: 'center', gap: '8px'}}>
+                <Avatar
+                  size="22"
+                  src={getWebsiteLogo()}
+                />
+                <Text className={'text-white'}>{getWebsiteName()}</Text>
+                <TriangleDown className={'text-white'} size={9}/>
+              </View>
+            )}>
+          {/*<QRLoginButton />*/}
+        </NavBar>
+      </Sticky>
     </>
   )
 }

src/pages/index/index.scss

@@ -18,3 +18,59 @@ page {
     height: 70px;
   }
 }
+
+/* 轮播图容器样式，确保支持两种滑动操作 */
+.banner-swiper-container {
+  touch-action: pan-y !important; /* 允许垂直滑动 */
+  
+  .nut-swiper {
+    touch-action: pan-y !important; /* 允许垂直滑动 */
+    
+    .nut-swiper-item {
+      touch-action: pan-x pan-y !important; /* 允许水平和垂直滑动 */
+      
+      image {
+        pointer-events: auto; /* 确保图片点击事件正常 */
+        touch-action: manipulation; /* 优化触摸操作 */
+      }
+    }
+  }
+  
+  /* 为Swiper容器添加特殊处理 */
+  .nut-swiper--horizontal {
+    touch-action: pan-y !important; /* 允许垂直滑动 */
+  }
+}
+
+/* 吸顶状态下的样式 */
+.nutui-sticky--fixed {
+  .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平台启用硬件加速滚动 */
+}

src/pages/index/index.tsx

@@ -1,27 +1,26 @@
 import Header from './Header';
-import BestSellers from './BestSellers';
 import Taro from '@tarojs/taro';
 import {useShareAppMessage} from "@tarojs/taro"
 import {useEffect, useState} from "react";
 import {getShopInfo} from "@/api/layout";
-import {Sticky} from '@nutui/nutui-react-taro'
 import Menu from "./Menu";
 import Banner from "./Banner";
 import {checkAndHandleInviteRelation, hasPendingInvite} from "@/utils/invite";
 import './index.scss'
-
-// import GoodsList from "./GoodsList";
+import GoodsList from './GoodsList';
 
 function Home() {
   // 吸顶状态
-  const [stickyStatus, setStickyStatus] = useState<boolean>(false)
+  // const [stickyStatus, setStickyStatus] = useState<boolean>(false)
+  // Tabs粘性状态
+  const [_, setTabsStickyStatus] = useState<boolean>(false)
 
   useShareAppMessage(() => {
     // 获取当前用户ID，用于生成邀请链接
     const userId = Taro.getStorageSync('UserId');
 
     return {
-      title: '网宿小店 - 网宿软件',
+      title: '🏠 首页 🏠',
       path: userId ? `/pages/index/index?inviter=${userId}&source=share&t=${Date.now()}` : `/pages/index/index`,
       success: function () {
         console.log('首页分享成功');
@@ -79,10 +78,15 @@ function Home() {
     });
   };
 
-  const onSticky = (item: IArguments) => {
-    if(item){
-      setStickyStatus(!stickyStatus)
-    }
+  // const onSticky = (item: IArguments) => {
+  //   if(item){
+  //     setStickyStatus(!stickyStatus)
+  //   }
+  // }
+
+  // 处理Tabs粘性状态变化
+  const handleTabsStickyChange = (isSticky: boolean) => {
+    setTabsStickyStatus(isSticky)
   }
 
   const reload = () => {
@@ -150,14 +154,13 @@ function Home() {
 
   return (
     <>
-      <Sticky threshold={0} onChange={() => onSticky(arguments)}>
-        <Header stickyStatus={stickyStatus}/>
-      </Sticky>
+      {/* Header区域 - 现在由Header组件内部处理吸顶逻辑 */}
+      <Header />
+
       <div className={'flex flex-col mt-12'}>
         <Menu/>
         <Banner/>
-        <BestSellers/>
-        {/*<GoodsList/>*/}
+        <GoodsList onStickyChange={handleTabsStickyChange}/>
       </div>
     </>
   )