微信小程序点击固定导航栏滑动到指定元素位置

曾经终败给现在 2023-02-13 11:55 63阅读 0赞

**项目需求**：头部固定导航栏，点击可以滑动到指定位置  
**第一步**：获取导航栏的高度

//nav-list为导航的id
    var navHight;
    wx.createSelectorQuery().select('#nav-list').boundingClientRect(function(res){ 
    	//输出为下面的图 主要用到top和height
    	console.log(res);
    	//id为元素的id
    	//height元素的高
    	//top为元素距离顶部的尺寸，可以说y轴 这个会随着页面滑动而变化，固定的导航栏就不会变化
    }).exec();

第一步的console.log(res);  
![在这里插入图片描述][20200529112507636.png]  
**第二步**：获取要滑动元素的参数（距离顶部的尺寸）

var target_id="#"+id;//元素的id
    var to_target= wx.createSelectorQuery();
    to_target.selectViewport().scrollOffset();
    to_target.select(target_id).boundingClientRect();
    to_target.exec(function(ret){ 
    	//输出为下面的图 可以看到获取的是一个数组 主要用到ret[0]的scrollTop和ret[1]的top
    	console.log(ret);
    	//ret[0]的scrollTop为页面滑动了多少距离
    	//ret[1]的top为元素距离顶部还差多少距离
    	//ret[0].scrollTop + ret[1].top为页面没有滑动时（即页面滑动到了顶部），元素距离顶部的距离
    	//navHight为第一步获取到的导航栏的高
    	wx.pageScrollTo({ 
    		duration:1000,
    		scrollTop:ret[0].scrollTop + ret[1].top - navHight
    	})
    })

第二步的console.log(ret);  
![在这里插入图片描述][20200529113324934.png]

**最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！**

[20200529112507636.png]: https://img-blog.csdnimg.cn/20200529112507636.png
[20200529113324934.png]: https://img-blog.csdnimg.cn/20200529113324934.png