小程式操作dom

小程式操作DOM

<scroll-view scroll-y='true' style="height:100vh;" bindscroll="bindscroll" scroll-into-view="{{toview}}">
	<view class="rol">
		<text class="title" id="normalServe">常用應用</text>
		<text class="title" id="normalServe1">常用應用2</text>
		<text class="title" id="normalServe2">常用應用3</text>
	</view>
</scroll-view>
<view class="dadasfa"  wx:if="{{showNav}}"> dsadasfaf
</view>
123456789
Page({
  //宣告節點查詢的方法
  queryMultipleNodes: function() {
    const query = wx.createSelectorQuery()                // 建立節點查詢器 query
    query.select('#productServe').boundingClientRect()    // 這段程式碼的意思是選擇Id=productServe的節點，獲取節點位置資訊的查詢請求
    query.select('#enterpriseServe').boundingClientRect() // 這段程式碼的意思是選擇Id=enterpriseServe的節點，獲取節點位置資訊的查詢請求
    query.select('#normalServe').boundingClientRect()     // 這段程式碼的意思是選擇Id=normalServe的節點，獲取節點位置資訊的查詢請求
    query.selectViewport().scrollOffset()                 // 這段程式碼的意思是獲取頁面滑動位置的查詢請求
    query.exec((res) => {
      res[0].top                                          // #productServe節點的到頁面頂部的距離
      res[1].width                                        // #enterpriseServe節點的寬度
      res[2].height                                       // #normalServe節點的高度
    })
  }
})
console.log(res) 輸出節點資訊詳情