uniapp 跳转到指定位置

嘿，小苹果2023-10-11 19:51

javascript 复制代码

this.$router.push({
  name: 'Demo',
  params: {
    id: '123'
  }
})

这样就实现了页面的跳转，并且将参数id传递给了Demo组件。

如果需要跳转到当前页面的不同位置，我们可以使用锚点来实现。锚点是一个HTML元素的标识符，可以用于定位和跳转到该元素。例如，我们可以在页面中添加一个id为anchor的元素，并给它一个具有唯一性的标识符。

javascript 复制代码

<div id="anchor"></div>

然后，在跳转时，我们可以在跳转URL中添加#anchor的片段标识符，来实现跳转到该元素。

javascript 复制代码

this.$router.push('/pages/demo/123#anchor')

这样就可以跳转到Demo组件中id为anchor的元素位置。

除了使用锚点，UniApp还提供了一些其他的方法来实现页面的定位。例如，我们可以在组件的created生命周期中，通过获取元素的offsetTop来实现页面的定位。

javascript 复制代码

created() {
  this.$nextTick(() => {
    let target = document.getElementById('anchor')
    let scrollTop = target.offsetTop
    document.documentElement.scrollTop = scrollTop
    document.body.scrollTop = scrollTop
  })
}

这样就可以在该页面加载完成时自动跳转到指定位置