微信小程序获取指定元素，滚动页面到指定位置

微信小程序获取指定元素，滚动页面到指定位置

• 微信小程序获取指定元素的宽高等信息,并滚动页面到指定位置

微信小程序获取指定元素的宽高等信息,并滚动页面到指定位置

注：原生小程序开发：
createSelectorQuery() 创建一个选择器查询实例。
select('#target') 选择 id="target" 的元素。
boundingClientRect() 获取目标元素的位置。
wx.pageScrollTo() 用于滚动页面到指定位置。

<view class="content">
  // 一些内容
  <view class="item" id="target">目标元素</view>
  // 更多内容
</view>
// 触发滚动
<button bindtap="scrollToElement">滚动到目标</button>

// 微信小程序获取指定元素的宽高等信息,并滚动页面到指定位置
scrollToElement() {
   const query = wx.createSelectorQuery(); // 获取查询实例
   query.select('#target') // 获取目标元素
     .boundingClientRect((rect) => {
			console.log(rect,'rect')
       if (rect && rect.top) {
         wx.pageScrollTo({
           scrollTop: rect.top, // 滚动到目标元素的位置
           duration: 300,       // 滚动动画的持续时间
         });
       }
     })
     .exec();
 },

点击参考答案滚动到文本输入框位置

结语：

前端路上 | 所知甚少，唯善学。

各位小伙伴有什么疑问，欢迎留言探讨。

--- 关注我：前端路上不迷路 ---