微信小程序開發(fā)獲取界面上的節(jié)點信息
在微信小程序的開發(fā)中,獲取界面上的節(jié)點信息是一個非常重要的功能。通過節(jié)點信息查詢 API,我們可以輕松地獲取節(jié)點屬性、樣式、以及在界面上的位置等信息。最常見的用法是使用這個接口來查詢某個節(jié)點的當前位置,以及界面的滾動位置。
1. 使用節(jié)點查詢 API 獲取節(jié)點信息
使用 wx.createSelectorQuery() 可以創(chuàng)建 SelectorQuery 對象,該對象有以下方法:
- select(selector): 在當前頁面下選擇第一個匹配選擇器 selector 的節(jié)點,并返回單個 NodeInfo 對象實例。
- selectAll(selector): 在當前頁面下選擇多個匹配選擇器 selector 的節(jié)點,并返回 NodeList 對象實例。
- selectViewport(): 以顯示區(qū)域作為參照,返回 ViewportRect 對象實例。
- exec(callback): 執(zhí)行所有已添加的請求并收集結果,回調函數(shù)會被傳入所有請求的結果。
示例代碼如下:
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect(function(res){
res.top // #the-id 節(jié)點的上邊界坐標(相對于顯示區(qū)域)
})
query.selectViewport().scrollOffset(function(res){
res.scrollTop // 顯示區(qū)域的豎直滾動位置
})
query.exec()
上述代碼中,#the-id 是一個節(jié)點選擇器,在自定義組件或包含自定義組件的頁面中,推薦使用 this.createSelectorQuery() 來代替 wx.createSelectorQuery(),這樣可以確保在正確的范圍內選擇節(jié)點。
2. 使用節(jié)點布局相交狀態(tài) API 監(jiān)聽節(jié)點狀態(tài)
使用節(jié)點布局相交狀態(tài) API 可以監(jiān)聽兩個或多個組件節(jié)點在布局位置上的相交狀態(tài),這一組API常??梢杂糜谕茢嗄承┕?jié)點是否可以被用戶看見、有多大比例可以被用戶看見。
使用 wx.createIntersectionObserver() 可以創(chuàng)建 IntersectionObserver 對象,該對象有以下方法:
- relativeTo(selector): 指定參照節(jié)點,在它的布局區(qū)域內才會觸發(fā)相交狀態(tài)變化事件。
- relativeToViewport(): 以顯示區(qū)域作為參照,可以觀測到目標節(jié)點在顯示區(qū)域內的相交狀態(tài)變化。
- observe(selector, callback): 開始監(jiān)聽相交狀態(tài)變化,當某個目標節(jié)點的相交狀態(tài)變化時,就會執(zhí)行回調函數(shù)。
- disconnect(): 停止監(jiān)聽相交狀態(tài)變化。
- relativeToSelectorQuery(query): 用于指定選擇器查詢實例作為參照區(qū)域之一。
下面是一個示例代碼,可以在目標節(jié)點每次進入或離開頁面顯示區(qū)域時,觸發(fā)回調函數(shù):
Page({
onLoad: function(){
wx.createIntersectionObserver().relativeToViewport().observe('.target-class', (res) => {
res.id // 目標節(jié)點 id
res.dataset // 目標節(jié)點 dataset
res.intersectionRatio // 相交區(qū)域占目標節(jié)點的布局區(qū)域的比例
res.intersectionRect // 相交區(qū)域
res.intersectionRect.left // 相交區(qū)域的左邊界坐標
res.intersectionRect.top // 相交區(qū)域的上邊界坐標
res.intersectionRect.width // 相交區(qū)域的寬度
res.intersectionRect.height // 相交區(qū)域的高度
})
}
})
下面是另一個示例代碼,可以在目標節(jié)點與參照節(jié)點在頁面顯示區(qū)域內相交或相離,且相交或相離程度達到目標節(jié)點布局區(qū)域的20%和50%時,觸發(fā)
<本文由himall原創(chuàng),商業(yè)轉載請聯(lián)系作者獲得授權,非商業(yè)轉載請標明:himall原創(chuàng)>
滿足不同行業(yè)發(fā)展電商的需求,HiMall更有針對性的提供不同行業(yè)內的電商解決方案
-
跨境電商解決方案
支持直郵/保稅模式
對接海關/保稅倉
支持多國國際語言
對接Paypal國際支付
幫助跨境外貿企業(yè)搭建跨境進口/出口電商平臺,搶占國際電商市場,針對企業(yè)需求定制個性化跨境電商解決方案 -
分賬解決方案
迎合金融監(jiān)管要求
規(guī)避“二清”結算
節(jié)約平臺財務成本
降低平臺招商成本
在合法、合規(guī)的前提下,為電商平臺提供資金收付、賬戶管理、資金合規(guī)等一體化整體解決方案 -
B2B批發(fā)解決方案
多級階梯批發(fā)價
布局全渠道批發(fā)入口
專屬批發(fā)訂貨市場
銀聯(lián)B2B大額支付
為企業(yè)快速搭建綜合性B2B批發(fā)電商平臺,整合線下批發(fā)資源,拓展線上批發(fā)渠道,實現(xiàn)批發(fā)業(yè)務24小時在線經營
-
MRO工業(yè)品采購平臺系統(tǒng)|MRO工業(yè)品采購平臺系統(tǒng)有哪些功能
最新消息:MRO工業(yè)品采購平臺系統(tǒng) 是一款集產、研、銷于一體的綜合性解決方案,專為解決工業(yè)品企業(yè)的采購難題而設計。該系統(tǒng)通過...詳情
-
電子元器件采購商城系統(tǒng)|電子元器件采購商城系統(tǒng)有哪些功能
最新消息:電子元器件采購商城系統(tǒng) 是專為滿足電子元器件行業(yè)復雜業(yè)務流程需求而設計的綜合性平臺。它不僅提供了全面的技術支持...詳情
【本站聲明】
1、本網站發(fā)布的該篇文章,目的在于分享電商知識及傳遞、交流相關電商信息,以便您學習或了解電商知識,請您不要用于其他用途;
2、該篇文章中所涉及的商標、標識的商品/服務并非來源于本網站,更非本網站提供,與本網站無關,系他人的商品或服務,本網站對于該類商標、標識不擁有任何權利;
3、本網站不對該篇文章中所涉及的商標、標識的商品/服務作任何明示或暗示的保證或擔保;
4、本網站不對文章中所涉及的內容真實性、準確性、可靠性負責,僅系客觀性描述,如您需要了解該類商品/服務詳細的資訊,請您直接與該類商品/服務的提供者聯(lián)系。