Просмотр исходного кода

🐛 fix(goods-spec-selector): 修复商品规格选择器滚动和样式问题

- 为模态框容器添加 `touch-action: none` 和 `overflow: hidden` 以阻止触摸滚动
- 增加模态框内容区域和选项区域的最大高度,提升大屏设备体验
- 在模态框显示时通过 `Taro.pageScrollTo` 将页面滚动到顶部,防止背景滚动
- 为模态框根元素添加 `onTouchMove` 事件处理器,阻止触摸事件冒泡和默认滚动行为
- 临时注释掉商品详情页中富文本详情渲染的逻辑,避免潜在的渲染问题
yourname 1 месяц назад
Родитель
Сommit
6733e75fd2

+ 4 - 2
mini/src/components/goods-spec-selector/index.css

@@ -12,13 +12,15 @@
   display: flex;
   align-items: flex-end;
   z-index: 1000;
+  touch-action: none;
+  overflow: hidden;
 }
 
 .spec-modal-content {
   background: white;
   border-radius: 24rpx 24rpx 0 0;
   width: 100%;
-  max-height: 70vh;
+  max-height: 150vh;
   overflow: hidden;
 }
 
@@ -47,7 +49,7 @@
 
 .spec-options {
   padding: 24rpx;
-  max-height: 400rpx;
+  max-height: 700rpx;
   overflow-y: auto;
 }
 

+ 18 - 1
mini/src/components/goods-spec-selector/index.tsx

@@ -157,6 +157,17 @@ export function GoodsSpecSelector({
     }
   }, [visible, currentQuantity])
 
+  // 模态窗口显示/隐藏时控制页面滚动
+  useEffect(() => {
+    if (visible) {
+      // 阻止页面滚动 - 滚动到顶部
+      Taro.pageScrollTo({
+        scrollTop: 0,
+        duration: 0
+      })
+    }
+  }, [visible])
+
   // 获取最大可购买数量
   const getMaxQuantity = () => {
     if (!selectedSpec) return 999
@@ -277,7 +288,13 @@ export function GoodsSpecSelector({
   if (!visible) return null
 
   return (
-    <View className="spec-modal">
+    <View
+      className="spec-modal"
+      onTouchMove={(e) => {
+        e.stopPropagation()
+        e.preventDefault()
+      }}
+    >
       <View className="spec-modal-content">
         <View className="spec-modal-header">
           <Text className="spec-modal-title">选择规格</Text>

+ 3 - 2
mini/src/pages/goods-detail/index.tsx

@@ -557,7 +557,7 @@ export default function GoodsDetailPage() {
             <Text className="goods-description">{goods.instructions || '暂无商品描述'}</Text>
           </View>
 
-          {goods.detail ? (
+          {/* {goods.detail && goods.detail.trim() ? (
             <RichText
               className="detail-content"
               nodes={goods.detail
@@ -570,7 +570,8 @@ export default function GoodsDetailPage() {
             />
           ) : (
             <Text className="no-detail">暂无商品详情</Text>
-          )}
+          )} */}
+
         </View>
       </ScrollView>