工作【当van-tab不满足固定在顶部】

最新推荐文章于 2024-11-05 15:31:54 发布

33子～

最新推荐文章于 2024-11-05 15:31:54 发布

阅读量876

点赞数

文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_46254175/article/details/133174716

版权

文章讲述了作者在实现H5滑动列表时遇到的问题，顶部tab栏需固定且与下滑动列表交互。在iOS上遇到滚动消失问题，通过分析发现是由于fixed定位影响了滚动。解决方案包括为父元素添加overflow:auto以显示滚动条，或为list包裹一层scrollable-container并设置overflow-y:auto。

摘要由CSDN通过智能技术生成

背景

需要H5实现一下滑动列表，顶部tab栏可以切换，当向下滑动列表的时候tab栏固定到顶部。果断的看了一下官方文档：
就是这个，我一看还有扩展属性，非常友好。向下滑动查看文档
在这里插入图片描述

使用sticky实现的。众所周知，在ios上类似固定这种都会有一些问题，比如滑动过程中突然消失不见了。。。（虽然我还没研究为什么会出现这个，记个TODO）

此时，附上我的代码：

<div class="container">
        <div class="fixed-tabs">
            <van-tabs @change="changeTab" v-model="active">
                <van-tab title="进行中">
                    <div class="scrollable-container" v-if="doingOrderList.length !== 0 && state === 0">
                        <van-list
                            v-model="doingOrderLoading"
                            :finished="doingOrderFinished"
                            finished-text="没有更多了"
                            @load="onLoadDoingOrderList"
                        >
                            <ListContainer
                                :list="doingOrderList"
                                @emitJumpDetail="onJumpDetail"
                            />
                        </van-list>
                    </div>
                    <div v-else>
                        <Empty />
                    </div>
                </van-tab>
                <van-tab title="已结束">
                    <div class="scrollable-container" v-if="finishedOrderList.length !== 0 && state === 1">
                        <van-list
                            v-model="finishOrderLoading"
                            :finished="finishOrderFinished"
                            finished-text="没有更多了"
                            @load="onLoadFinishOrderList"
                        >
                            <ListContainer
                                :list="finishedOrderList"
                                @emitJumpDetail="onJumpDetail"
                            />
                        </van-list>
                    </div>
                    <div v-else>
                        <Empty />
                    </div>
                </van-tab>
            </van-tabs>
        </div>
    </div>

.fixed-tabs {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999; /* 可根据需要调整 z-index 值 */
 }

本来以为大功告成，但是突然又发现了一个问题，页面不能滑动了。。。
为什么不能滑动了呢？

回看下我们的样式，tab是包含list的父元素。父元素设置了fixed，所以呀～
因为固定定位的父元素导致了滚动行为的限制。

固定定位的元素会脱离正常文档流，并相对于最近的具有定位（非static）属性的父元素进行定位。这可能会影响到内部元素的滚动行为。

解决办法一：
给包裹Tab组件的固定定位的div元素添加overflow: auto;样式。这样可以为该元素添加滚动条，并使Tab内部的列表可以在滚动时进行滑动。

解决办法二：
给list包裹一层div，并且设置overflow：auto属性。

.scrollable-container {
    height: calc(100vh - 50px); /* 根据需要调整高度值 */
    overflow-y: auto;
}