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博客文章来源:https://www.toymoban.com/news/detail-620085.html
五、测试成功
参考链接
uniapp如何实现锚点跳转文章来源地址https://www.toymoban.com/news/detail-620085.html
到了这里,关于小程序-uni-app:实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!