[Bug Report] floatingPanel 与 indexBar 配合使用时，indexBar 会有 BUG

[BLJJ-DBLD]

重现链接

https://codesandbox.io/s/vant-4-issue-template-forked-jm7rf2?file=/package.json&resolutionWidth=320&resolutionHeight=676

Vant 版本

4.5.0

描述一下你遇到的问题。

indexBar 的锚点浮动时会出现异位

重现步骤

代码所示：

<template>
  <van-floating-panel :height="500" :anchors="[100, 500, 667]" :content-draggable="false">
    <van-index-bar>
      <van-index-anchor index="A" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="B" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="C" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="D" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="E" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="F" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="G" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="H" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="I" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-index-anchor index="J" />
      <van-cell title="文本" />
      <van-cell title="文本" />
      <van-cell title="文本" />
    </van-index-bar>
  </van-floating-panel>
</template>

设备/浏览器

chrome

[ghost]

如果设置的高度达到整个屏幕的高度就不会有问题，猜测 indexBar 是根据整屏高度来计算的，代码暂时还没看懂，不过有点意思🤔

[zhousg]

上面问题，参考下

<template>
  <div id="app">
    <van-floating-panel
      v-model:height="height"
      :anchors="[100, 500, 667]"
      :content-draggable="false"
    >
      <van-index-bar>
        <van-index-anchor index="A" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="B" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="C" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="D" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="E" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="F" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="G" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="H" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="I" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-index-anchor index="J" />
        <van-cell title="文本" />
        <van-cell title="文本" />
        <van-cell title="文本" />
      </van-index-bar>
    </van-floating-panel>
  </div>
</template>

<script setup>
import { ref } from "vue";

const height = ref(500);
const top = `-${window.innerHeight - height.value}px`;
const bottom = `${window.innerHeight - height.value}px`;
</script>

<style scoped>
:deep(.van-index-anchor) {
  top: v-bind(top);
}
.van-index-bar {
  padding-bottom: v-bind(bottom)
}
</style>

问题应该是：transform 套了 fixed ，但是组件是这么设计的，嵌套就出问题了。 @chenjiahan 把 floatingPanel 的 transform 改成 bottom 来位移？

[inottn]

问题应该是：transform 套了 fixed ，但是组件是这么设计的，嵌套就出问题了。 @chenjiahan 把 floatingPanel 的 transform 改成 bottom 来位移？

抛开这个问题，感觉使用 transform 应该更好一些。可以考虑修改 indexBar 的相关逻辑。

[chenjiahan]

把 floatingPanel 的 transform 改成 bottom 来位移

如果能力上可以对齐的话，确实 bottom 可以适配更多场景。

不过 bottom 的渲染性能会差一些，不如 transform