Open CLHaoer opened 3 months ago
4.9.4
FloatingPanel嵌套tabs并启用scrollspy sticky,就会出现这个两个功能的布局和定位错位问题
<template> <div id="app"> <van-floating-panel v-model:height="height" :anchors="anchors"> <van-tabs scrollspy sticky> <van-tab v-for="index in 8" :title="'标签 ' + index"> <div class="content" :style="{ height: `${index * 100}px` }"> {{ index }} aaaa </div> </van-tab> </van-tabs> </van-floating-panel> </div> </template> <script setup> import {ref} from 'vue' const anchors = [ 100, Math.round(0.4 * window.innerHeight), Math.round(0.7 * window.innerHeight), ]; const height = ref(anchors[0]); </script>
No response
应该是和这个情况类似:https://vant.pro/vant/#/zh-CN/tab#tabs-kai-qi-swipeable-huo-animated-shu-xing-hou-nei-rong-qu-yuan-su-de-sticky-gong-neng-jiang-bu-da-yu-qi
这是因为 transform 元素内部的 fixed 定位会相对于该元素进行计算,而不是相对于整个文档,从而导致布局异常。
Vant Version
4.9.4
Describe the Bug
FloatingPanel嵌套tabs并启用scrollspy sticky,就会出现这个两个功能的布局和定位错位问题
Reproduce Steps
Device / Browser
No response