小程序-uni-app：实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)

snowball_li

已于 2023-08-18 17:31:45 修改

阅读量4.3k

点赞数 1

分类专栏：小程序文章标签：小程序 uni-app

于 2023-07-09 13:41:00 首次发布

本文链接：https://blog.csdn.net/snowball_li/article/details/131621725

版权

小程序专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Uniapp支持锚点连接，可以通过以下步骤实现锚点连接

一、在需要设置锚点的页面，为需要跳转的部分设置id属性。

例如，设置一个id为“section1”的元素：

<div id="section1">这是需要跳转到的部分</div>

二、在需要跳转到锚点的页面，使用`uni.navigateTo`或`uni.redirectTo`方法，搭配URL参数的方式实现跳转。

例如，跳转到id为“section1”的部分：

uni.navigateTo({
  url: '/pages/destinationPage?to=section1'
})

三、在目标页面，使用`uni.createSelectorQuery`方法获取目标元素，并使用`scrollIntoView`方法滚动到目标元素。

例如，在destinationPage页面的onLoad方法中实现：

onLoad: function (options) {
  // 获取要滚动到的元素id
  var to = options.to;
  // 获取目标元素
  uni.createSelectorQuery().select('#' + to).boundingClientRect(function(rect){
    // 使用scrollIntoView方法滚动到目标元素
    uni.pageScrollTo({
      scrollTop: rect.top,
      duration: 500
    })
  }).exec();
}

通过以上步骤，就可以在Uniapp中实现锚点连接了。