Vue点击导航栏，页面滚动到相应位置

### 实现 UniApp 页面滚动到指定位置 在 UniApp 中实现点击导航栏使页面滚动到特定位置的功能主要依赖于 `scroll-view` 组件以及 JavaScript API 来控制视图的滚动行为[^1]。 #### 使用 scroll-view 和 scrollTo 方法 为了达到这一目的，可以利用 `scroll-view` 组件并结合其提供的 `scroll-to` 或者 `scrollIntoView` 属性来定位具体元素。下面是一个简单的例子展示如何通过点击事件触发页面内的某个区域自动滚入视野： ```html <template> <view class="container"> <!-- 导航条 --> <navigator url="#" @click="goToSection('section1')">前往部分一</navigator> <navigator url="#" @click="goToSection('section2')">前往部分二</navigator> <!-- 可滚动的内容区 --> <scroll-view :scroll-y="true" id="scrollViewId" style="height: 300px;"> <view id="section1">这是第一个部分内容...</view> <view id="section2">这是第二个部分内容...</view> </scroll-view> </view> </template> <script> export default { methods: { goToSection(sectionId) { const query = uni.createSelectorQuery().in(this); query.select('#' + sectionId).boundingClientRect(); query.exec((res) => { this.scrollTo(res[0].top); // 计算目标距离顶部的距离 }); }, scrollTo(topOffset) { let scrollView = uni.createSelectorQuery().select("#scrollViewId"); scrollView.fields({ rect: true }, (data) => { if(data){ data.scrollTop = topOffset; scrollView.scroll({ scrollTop: data.scrollTop, duration: 300 // 滚动动画持续时间(ms) }) } }).exec() } } } </script> ``` 上述代码片段展示了怎样定义一个带有两个链接按钮的模板结构，当用户点击这些链接时会调用相应的 Vue.js 方法去计算所选节的位置，并让页面平滑地滚动至该处。