微信小程序獲取指定元素的寬高等信息,并滾動頁面到指定位置

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

點擊參考答案滾動到文本輸入框位置

結語：

前端路上 | 所知甚少，唯善學。
各位小伙伴有什么疑問，歡迎留言探討。

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