正确的微信小程序滚动到指定元素方法

江河/ 02月12日/ 小程序/ 浏览 144

现在在网站找【微信小程序滚动到指定元素】,结果大部分都是:


使用wx.createSelectorQuery()来查询元素,并使用scrollIntoView方法滚动到视图中


代码类似如下:


scrollToView: function() {
	// 假设你想滚动到的元素有一个id为 'target'
	var query = wx.createSelectorQuery();
	query.select('#target').boundingClientRect(function(rect) {
		wx.pageScrollTo({
			scrollTop: rect.top + 10, // rect.top 是元素的顶部位置,+10是为了拉开一点距离
			duration: 300 // 动画时长,单位 ms
		});
	}).exec();
}


这个方法的问题在于,需要在页面加载后,立即获取并存储元素的位置。如果,在页面滚动后,再获取元素位置是得不到期望的结果的。


其实,微信早就提供了专门的方法来实现这个需求:


// 假设你想滚动到的元素有一个id为 'target'
wx.pageScrollTo({
	selector: '#target',
	offsetTop: 10,
})


简单且好用!更多信息科参考微信文档:https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html


发表评论

暂无评论,抢个沙发...

客服 工单