fix(FloatingPanel): add dynamic padding to content based on height changes (#13712)

packages/vant/src/floating-panel/FloatingPanel.tsx

@@ -179,7 +179,11 @@ export default defineComponent({
         onTouchcancel={onTouchend}
       >
         {renderHeader()}
-        <div class={bem('content')} ref={contentRef}>
+        <div
+          class={bem('content')}
+          ref={contentRef}
+          style={{ paddingBottom: addUnit(boundary.value.max - height.value) }}
+        >
           {slots.default?.()}
         </div>
       </div>

packages/vant/src/floating-panel/demo/index.vue

@@ -39,7 +39,7 @@ const height = ref(anchors[0]);
 </script>
 
 <template>
-  <van-tabs>
+  <van-tabs swipe-threshold="3">
     <van-tab :title="t('basicUsage')">
       <van-floating-panel>
         <van-cell-group>

packages/vant/src/floating-panel/test/__snapshots__/demo.spec.ts.snap

@@ -5,58 +5,58 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-tabs__wrap">
     <div
       role="tablist"
-      class="van-tabs__nav van-tabs__nav--line"
+      class="van-tabs__nav van-tabs__nav--line van-tabs__nav--complete"
       aria-orientation="horizontal"
     >
       <div
         id="van-tabs-0"
         role="tab"
-        class="van-tab van-tab--line van-tab--active"
+        class="van-tab van-tab--line van-tab--grow van-tab--active"
         tabindex="0"
         aria-selected="true"
         aria-controls="van-tab"
         data-allow-mismatch="attribute"
       >
-        <span class="van-tab__text van-tab__text--ellipsis">
+        <span class="van-tab__text">
           Basic Usage
         </span>
       </div>
       <div
         id="van-tabs-1"
         role="tab"
-        class="van-tab van-tab--line"
+        class="van-tab van-tab--line van-tab--grow"
         tabindex="-1"
         aria-selected="false"
         aria-controls="van-tab"
         data-allow-mismatch="attribute"
       >
-        <span class="van-tab__text van-tab__text--ellipsis">
+        <span class="van-tab__text">
           Custom Anchors
         </span>
       </div>
       <div
         id="van-tabs-2"
         role="tab"
-        class="van-tab van-tab--line"
+        class="van-tab van-tab--line van-tab--grow"
         tabindex="-1"
         aria-selected="false"
         aria-controls="van-tab"
         data-allow-mismatch="attribute"
       >
-        <span class="van-tab__text van-tab__text--ellipsis">
+        <span class="van-tab__text">
           Head Drag Only
         </span>
       </div>
       <div
         id="van-tabs-3"
         role="tab"
-        class="van-tab van-tab--line"
+        class="van-tab van-tab--line van-tab--grow"
         tabindex="-1"
         aria-selected="false"
         aria-controls="van-tab"
         data-allow-mismatch="attribute"
       >
-        <span class="van-tab__text van-tab__text--ellipsis">
+        <span class="van-tab__text">
           Disable Magnetic
         </span>
       </div>
@@ -85,7 +85,10 @@ exports[`should render demo and match snapshot 1`] = `
           <div class="van-floating-panel__header-bar">
           </div>
         </div>
-        <div class="van-floating-panel__content">
+        <div
+          class="van-floating-panel__content"
+          style="padding-bottom: 361px;"
+        >
           <div class="van-cell-group van-hairline--top-bottom">
             <div class="van-cell van-cell--large">
               <div class="van-cell__title">

packages/vant/src/floating-panel/test/__snapshots__/index.spec.tsx.snap

@@ -9,7 +9,10 @@ exports[`should drag adsorption effect when anchors props is [100, 200, 400] 1`]
     <div class="van-floating-panel__header-bar">
     </div>
   </div>
-  <div class="van-floating-panel__content">
+  <div
+    class="van-floating-panel__content"
+    style="padding-bottom: 300px;"
+  >
     内容
   </div>
 </div>
@@ -24,7 +27,10 @@ exports[`should minHeight 100 and maxHeight 0.6 innerHeight when anchors props d
     <div class="van-floating-panel__header-bar">
     </div>
   </div>
-  <div class="van-floating-panel__content">
+  <div
+    class="van-floating-panel__content"
+    style="padding-bottom: 361px;"
+  >
     Content
   </div>
 </div>
@@ -36,7 +42,10 @@ exports[`should render header slot correctly 1`] = `
   style="height: 461px; transform: translateY(calc(100% + -100px)); transition: transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);"
 >
   Custom Header
-  <div class="van-floating-panel__content">
+  <div
+    class="van-floating-panel__content"
+    style="padding-bottom: 361px;"
+  >
   </div>
 </div>
 `;

packages/vant/src/floating-panel/test/index.spec.tsx

@@ -148,7 +148,7 @@ test('should not snap to anchors when magnetic is false', async () => {
   await later();
 
   // Should stay at dragged position (around 250px), not snap to nearest anchor (200px)
-  const {transform} = (wrapper.element as HTMLDivElement).style;
+  const { transform } = (wrapper.element as HTMLDivElement).style;
   expect(transform).not.toContain('-200px');
   expect(transform).not.toContain('-400px');
   expect(transform).toContain('-250px');
@@ -170,3 +170,22 @@ test('should snap to nearest anchor when magnetic is true (default)', async () =
     '-100px',
   );
 });
+
+test('should add padding bottom to content when panel is not fully expanded', async () => {
+  const wrapper = mount(FloatingPanel, {
+    props: {
+      anchors: [100, 200, 400],
+      height: 200,
+    },
+  });
+
+  const content = wrapper.find('.van-floating-panel__content')
+    .element as HTMLElement;
+  expect(content.style.paddingBottom).toBe('200px');
+
+  await wrapper.setProps({ height: 100 });
+  expect(content.style.paddingBottom).toBe('300px');
+
+  await wrapper.setProps({ height: 400 });
+  expect(content.style.paddingBottom).toBe('0px');
+});