把scroll-view的top设为top:var(--window-top); 提高等级 z-index
再把下面的内容一个外边距=scroll-view的高度
<template>
<view>
<view>
<scroll-view scroll-x="true" class="tab">
<view v-for="(item,index) in 20" class="bar" :class="index==highylig? 'active':''" @click="queittba(index)">国内</view>
</scroll-view>
<view class="content">
<view v-for="item in 20" style="margin: 20rpx 0;">
<list></list>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
highylig:''
}
},
methods: {
queittba(e){
this.highylig=e
}
},
}
</script>
<style scoped lang="less">
.tab{
position: fixed;
height: 100rpx;
background-color: #f7f7f7;
white-space: nowrap;
top:var(--window-top);
z-index: 2;
left: 0;
::-webkit-scrollbar {
display: none;
}
.bar{
font-size: 40rpx;
display: inline-block;
line-height: 100rpx;
margin: 0 10rpx;
&.active{
color: red;
}
}
}
.content{
margin-top:100rpx;
}
</style>