uniapp自定义导航栏页面会跟随滚动的问题

是我一开始布局和想法就有问题

不需要考虑去固定导航栏，而是让整个页面不要滚动

后面大佬说了两句话 让我从关注导航栏 转移到关注页面

于是如下

滚动的区域单独放一个容器

<template>

　　<view>

　　　　<view class = “rangking-content”>

　　　　　　头部及其他区域

　　　　</view>　

　　　　<view class="content-type2" :style="'height:'+ scrollH + 'px'" >
　　　　　　<scroll-view scroll-y="true" >

　　　　　　　　内容

　　　　　　</scroll-view>
　　　　</view>

　　</view>

</template>

 

 

在挂载页面的时候去获取屏幕及元素的高度

这时候数据已经渲染完成

mounted() {
uni.getSystemInfo({
　　success: (res)=>{ // res - 各种参数
 　　　　console.log(res)
　　　　 this.screenHeight = res.screenHeight; // 屏幕的高度 
　　　　 let info = uni.createSelectorQuery().select(".rangking-content");
　　　 　　　info.boundingClientRect((data)=>{ //data - 各种参数
　　　　　　　　　　console.log(data.height) // 元素高度
　　　　　　　　　　this.scrollH = res.screenHeight - data.height - res.statusBarHeight - 20; //滚动容器的高度
　　　　　　　　　　console.log(res.screenHeight,data.height,res.statusBarHeight)
　　 　　 }).exec()
　　　　}
　　});
},

 

记住scroll-view要设置高度  因为我这里父元素是设置了高度的 所以我在全局设置了scroll-view {height：100%}

 

 

这个时候ok啦