小程序跳转到指定节点，锚点效果，非scroll-view实现

最新推荐文章于 2024-07-22 11:20:48 发布

原创最新推荐文章于 2024-07-22 11:20:48 发布 · 816 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种在微信小程序中实现页面元素锚点跳转的方法，通过使用wx.createSelectorQuery()进行节点选择和位置查询，结合wx.pageScrollTo()实现平滑滚动到指定元素。此方法适用于需要在长页面中快速定位到特定内容的场景。

goAnchorPoint: function(e) {
	//1、返回一个查询实例
	const query = wx.createSelectorQuery();
	//2、选择要跳转的节点id
    query.select('#priceInfo').boundingClientRect();
    //3、获取显示区域的尺寸、滚动等位置等信息，然后添加节点的滚动位置查询
    query.selectViewport().scrollOffset();
    //4、执行跳转
    query.exec((res) => {
    	//5、res[0]是步骤2中的数据，res[1]是步骤3中的数据
      if (res[0] && res[1]) {
      	//6、将页面滚动到目标位置
        wx.pageScrollTo({
        	//7、计算滚动到目标的位置
          scrollTop: res[0].top + res[1].scrollTop,
          duration: 300
        })
      }
    });
}