1. 程式人生 > >小程式獲取scroll-view中元素位置

小程式獲取scroll-view中元素位置

小程式通過資料驅動頁面,但是有些情況我們需要獲取到頁面節點資訊,小程式文件中給我們提供了wx.createSelectorQuery()方法,通過這個方法我們可以拿到選擇元素的很多資訊,當呼叫wx.createSelectorQuery()方法會得到一個SelectorQuery物件例項然後可以呼叫這個例項中的很多方法:
in,select,selectAll,selectViewport,exec
這些方法的簡述可以查閱開發小程式開發文件

現在簡單介紹一下獲取頁面元素中的class為’site-about-info’的按鈕資訊
獲取佈局位置的查詢請求呼叫方法nodesRef.boundingClientRect([callback])

queryMultipleNodes: function(){
    var that = this;
    var aboutArr = [];
    wx.createSelectorQuery().selectAll('.site-about-info').boundingClientRect(function(rects){
      rects.forEach(function(rect){
        console.log(rect.bottom);// 節點的下邊界座標
        aboutArr.push(rect.bottom);
      })
      console.log(aboutArr);
      that.setData({
        aboutArr:aboutArr
      })
    }).exec();
  },

最後如果不呼叫exec(),其他的方法將不執行,exec()方法中的回撥函式返回所有請求(demo中boundingClientRect)的值,並將值放置到陣列中

這裡需要注意如果在請求後呼叫此方法需要在方法呼叫時給個延時,否則可能獲取不到資料