小程式獲取scroll-view中元素位置
阿新 • • 發佈:2019-01-02
小程式通過資料驅動頁面,但是有些情況我們需要獲取到頁面節點資訊,小程式文件中給我們提供了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)的值,並將值放置到陣列中
這裡需要注意如果在請求後呼叫此方法需要在方法呼叫時給個延時,否則可能獲取不到資料