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

selectDele

于 2020-06-29 20:50:25 发布

阅读量797

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/selectDele/article/details/107028145

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

5 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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
        })
      }
    });
}