制作tab选项卡滚动到屏幕边缘变为固定吸顶可以使用粘性布局

css position除了relative，absolute，fixed以外还有粘性布局sticky。

粘性布局需要设定一个top（例如top：0），当页面元素滚动到达设定的top值时，页面元素会变为fixed固定，未到达top值时页面元素是relative

代码示例

<template>
    <view>
        <!-- 商品分类选项卡 -->
        <view id="tab">
            <v-tabs v-model="tabIndex"
                            :tabs="tabs" 
                            field="name"
                            @change="changeTab" 
                            activeColor="#DD0029" 
                            fontSize="30rpx" 
                            :bold="false" 
                            height="100rpx" 
                            lineHeight="5rpx" 
                            lineColor="#DD0029" 
                            :lineScale="0.9"></v-tabs>
        </view>
        <!-- End 商品分类选项卡 -->
        <!-- 子选项卡 -->
        <view id="tab2">
            <template v-if="subTabs.length>0">
                <v-tabs v-model="subTabIndex"
                                :tabs="subTabs"
                                :pills="true"
                                field="name"
                                @change="changeSubTab"
                                activeColor="#FFFFFF"
                                pillsColor="#DD0029"
                                fontSize="20rpx" 
                                :bold="false" 
                                height="50rpx" 
                                padding="10rpx 0"
                                margin="0 20rpx"
                                paddingItem="0 30rpx"
                                :lineScale="0.5"></v-tabs>
            </template>
        </view>
        <!-- End 子选项卡 -->
        
        <view style="height: 2000px;background-color: #bce672;">
        </view>
                
    </view>
</template>

<script>
    
</script>

<style lang="stylus">
    page
        background-color #F2F2F2
    #tab
        position sticky
        top 50px
    #tab2
        position sticky
        top 100px
</style>

id为tab的元素会在顶部距离50px的位置进行固定，id为tab2的元素会在顶部距离100px的位置进行固定

标签：选项卡,top,元素,sticky,tab,position,吸顶,页面
来源： https://www.cnblogs.com/twilight-sparkle/p/15601290.html