uni-app顶部导航栏下拉滑动固定到屏幕顶部-蒲公英云

uni-app顶部导航栏下拉滑动固定到屏幕顶部

示例图片
在这里插入图片描述

代码

<template>
    <view style="display: flex;flex: row; position:fixed; left: 0; width: 100%; top: 30;z-index: 999;">
        <scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
            <view class="cu-item" :class="index==TabCur?'text-green cur':''" v-for="(item,index) in statusList" :key="index" @tap="tabSelect" :data-id="index">
                { { item}}
            </view>
        </scroll-view>
    </view>
</template>
<script>
    export default { 
        components: { 
        },
        data() { 
            return { 
                TabCur: 0,
                scrollLeft: 0
            }
        },
        methods: { 
            tabSelect(e) { 
                this.TabCur = e.currentTarget.dataset.id;
                this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
                console.log(this.TarCur)
            },
        }
    }
</script>
<style>
/* ================== 导航栏 ==================== */
.nav { 
    white-space: nowrap;
}
::-webkit-scrollbar { 
    display: none;
}
.nav .cu-item { 
    height: 90upx;
    display: inline-block;
    line-height: 90upx;
    margin: 0 10upx;
    padding: 0 20upx;
}
.nav .cu-item.cur { 
    border-bottom: 4upx solid;
}
.text-green,
.line-green,
.lines-green { 
    color: #39b54a;
}
.bg-white { 
    background-color: #ffffff;
    color: #666666;
}
.nav .cu-item.cur { 
    border-bottom: 4upx solid;
}
</style>