河源东莞网站建设昆明网站seo服务

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

注：原生小程序开发：
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();},

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

结语：

前端路上 | 所知甚少，唯善学。
各位小伙伴有什么疑问，欢迎留言探讨。

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