小程序页面滚动到指定位置

如何让页面自动滚动到某个位置（比如点击某一个按钮，需要自动滚动到对应内容的位置），在小程序是很简单的，官方提供获取元素位置和滚动到目标位置API:

1.使用uni.createSelectorQuery().select().boundingClientRect()查询到需要滚动到的元素位置

2.滚动到目标位置: uni.pageScrollTo()

微信原生也是一样的，使用wx.createSelectorQuery()和wx.pageScrollTo()

小程序很多api都很简单，拿来可以直接使用，下面总体使用方法案例：

toScroll() {
    
    
  // 1.使用uni.createSelectorQuery()查询到需要滚动到的元素位置
  const query = uni.createSelectorQuery().in(this);
  query.select('.recommend-list').boundingClientRect(data => {
    
    
     console.log(data.top) // 滚动到的位置（距离顶部 px）
    // 到这里我们可以从data中读到top，即离顶部的距离（px）
    // 2使用uni.pageScrollTo()将页面滚动到对应位置
    uni.pageScrollTo({
    
    
	  scrollTop: data.top, // 滚动到的位置（距离顶部 px）
	  duration: 300
	});
  }).exec();
},