导航栏和内容互相联动（uniapp+vue3）。直接贴原始代码

  今日给大家分享一下如何实现导航栏（nav）和内容部分上下联动。（前端小白自主研究，能用就用，不需要拉倒）。

一、实现过程：

       主要是使用 scroll-view 实现导航栏部分，onPageScroll（）来获取滚动距离，配合uni.createSelectorQuery()获取相关内容的参数。

这里有几点是有必要注意一下的：

        scroll-view 标签必须加上行内样式 overflow:hidden;white-space:nowrap; 否则无法实现滑动效果；
        scroll-view 包裹的要滑动的盒子元素要让它们变成行内块级元素（display:inline-block;）进行横向排列；
        scroll-view 包裹的需要滑动的盒子元素使用 display:flex; 是不起作用（无效）的；
        scroll-view 包裹的需要滑动的盒子元素不能使用浮动。

二、废话不多说，直接上代码

   html部分

   js部分

     这部分是声明导航对应内容的距离初始值 

 

 

    这部分实现了点击导航栏时，内容滚动到对应部分。主要使用uni.pageScrollTo（）实现这个功能。 

这部分是在页面渲染完成后获取每部分内容到屏幕顶部的距离，并且将距离赋值给之前声明的数据 

 

  省略部分代码逻辑相同，css部分就不上传了，毕竟所需样式不一样，自己根据需求设计即可。

注明：本人新手小白，代码有些冗余，希望各位根据自己需求来。