微信小程式操作DOM

2022-02-25 05:13:38 字數 928 閱讀 6725

返回的 obj 有五個方法:

1. obj.in

(component):沒用過這個方法,多用於元件的選擇器。

2. obj.select(selector):獲取指定的節點,selector是css選擇器。返回乙個 nodesref 物件例項,可以用於獲取節點資訊。

3. obj.selectall(selector):獲取指定的節點,selector是css選擇器。返回乙個 nodesref 物件例項,可以用於獲取節點資訊。

上面這兩個我感覺就是 js 中queryselector和queryselectorall的區別。

4. obj.selectviewport():我沒用過這個方法。官方說是選擇顯示區域,可用於獲取顯示區域的尺寸、滾動位置等資訊。也是返回乙個 nodesref 物件例項,可以用於獲取節點資訊。

5. exec( function

(res){} ):執行所有的請求,請求結果按請求次序構成陣列,在callback的第乙個引數中返回

上面返回的 nodesref 物件例項就很重要了,它有三個方法:

1. boundingclientrect( function

(rect){} ):就是這個方法,能夠動態獲取view元素的高度、寬度等屬性。還有其它的請看官方文件

2. scrolloffset( function(res) {}):獲取節點的水平、垂直滾動的位置等。節點必須是scroll-view或者viewport

3. fields(fields,function() ):這個可以獲取指定元素的自定義屬性和class名,具體的請看官方文件的說明。

wx.createselectorquery().selectall('.npl-intro').boundingclientrect(function

(rect) ).exec()

微信小程式dom操作的替代思路

在嘗試了幾類情況後,發現部分情況下可以用 變數繫結來實現效果。比如 一 實現view的顯示和影藏 在js中的data設定變數 bottomhidden1 block 然後在wxml中的view中設定 在其它我們需要的地方使用bindtap等繫結事件,js中定義該事件的function,使用this....

微信小程式Dom事件實現

請合理使用工具!細節就不說了,直接備份乙個實現的案例 wxml view class guess view image data data auto data index data num 1 data id bindtap mode widthfix src class img image vie...

(微信小程式)一 初識微信小程式

需要看的 先是檔案目錄 一 pages 他存放於多個頁面 如 index log頁面。可以把他裡面的每個資料夾看成乙個整體。這個整體存放著 html css 和 資料 1 index資料夾 存放的index頁面的目錄。2 index.js 他可以處理得到 ajax 或自定義定義的資料。把得到的值封裝...