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

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

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

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

这是需要跳转到的部分

二、在需要跳转到锚点的页面，使用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博客

五、测试成功

参考链接

uniapp如何实现锚点跳转

来源地址：https://blog.csdn.net/snowball_li/article/details/131621725