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

刺骨的言语ヽ痛彻心扉 2024-03-17 17:21 30阅读 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中实现锚点连接了。

#### 四、scroll-view设置锚点 ####

> :scroll-into-view="viewid"
> 
> let viewid = ref('')
> 
> 点击元素，设置对于的元素id/锚点id viewid

测试成功

[微信小程序实现锚点效果 scroll-view的scroll-into-view属性\_小程序scrollview scrollintoview\_FaxMiao的博客-CSDN博客][scroll-view_scroll-into-view_scrollview scrollintoview_FaxMiao_-CSDN]

#### 五、测试成功 ####

#### **参考链接** ####

[uniapp如何实现锚点跳转][uniapp]

[scroll-view_scroll-into-view_scrollview scrollintoview_FaxMiao_-CSDN]: https://blog.csdn.net/weixin_43951315/article/details/125151230
[uniapp]: https://www.gxlsystem.com/qianduan-4124.html