Uniapp支持锚点连接,可以通过以下步骤实现锚点连接 一、在需要设置锚点的页面,为需要跳转的部分设置id属性。 例如,设置一个id为“section1”的元素: 这是需要跳转到的部分 二、在需要跳转到锚点的页面,使用uni.navigat
Uniapp支持锚点连接,可以通过以下步骤实现锚点连接
例如,设置一个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-into-view="viewid"
let viewid = ref('')
点击元素,设置对于的元素id/锚点id viewid
测试成功
微信小程序实现锚点效果 scroll-view的scroll-into-view属性_小程序scrollview scrollintoview_FaxMiao的博客-CSDN博客
来源地址:https://blog.csdn.net/snowball_li/article/details/131621725
--结束END--
本文标题: 小程序-uni-app:实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)
本文链接: https://www.lsjlt.com/news/427602.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0