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中实现锚点连接了。