——上禮拜踩的坑

1、關于為什么不直接操作DOM對象？

因為微信小程序里沒有document對象。

2、為什么坑了這多時間？

因為之前看了個過期的帖子，完美避開了解決方案。

下面進入正文，需求是在微信小程序里構造一棵文件樹。

3、解決思路

定義一個自定義組件，并在這個組件里遞歸自己。

4、自定義組件.json文件

{"component": true,"usingComponents": {"alexTree":"path/to/component"} }

由于組件要引用自己，所以這里定義了組件自己。

“alexTree”是組件里引用自己時用的標簽名，理論上是可以自定義的，只要在wxml文件j里對應起來就好。

5、組件的property定義

properties: {treeBody:{type: Array,value:[],observer: function (newVal, oldVal, changedPath) {}},treeConfig:{type:Object,value:{haveOpGroup:false,haveIconGroup:false,opGroup:{label:"",icon:"",onTap:function(node){console.log("opGroup tapped.");}},tapOnNode:function(node){console.log("tapOnNode");}},observer: function(newVal, oldVal, changedPath) {}},},

主要定義了兩個屬性，一個是數據tree-body，一個是配置tree-config。

數據結構本身當然也是遞歸的。tree-body是一個數組（根目錄），其中的元素作為文件，一個文件可以是一個普通文件，也可以是一個目錄文件，用元素的isDir屬性來區分，如下：

{filename:<String>isDir:<Boolean>data:<Array>/<Object> }

filename是文件名，當isDir為true時，data為子文件數組，當isDir為false時，data為與文件相關的自定義數據，例如文件在服務器的url等。

6、 wxml大致結構。

<view wx:for="{{treeBody}}"><!-- 這里為當前節點的構造邏輯 --><view class='treeNode' catchtap="tapOnNode" data-node='{{item}}'> <<<<<<vviieew>>>>>>>>><!-- balabala --><!-- balabala --><!-- balabala --><!-- 然后判斷此節點是否展開，下面的邏輯里，如果這個節點為展開狀態的目錄，就遞歸此組件 --><!-- 注意alexTree為上面json文件里定義的 --><view class='childNodes'><alexTree wx:if="{{item.isDir && item.expand}}" tree-body="{{item.data}}" tree-config="{{treeConfig}}" data-filename="{{item.filename}}" bindnodechanged="_handleChildNodeChanged"/></view> </view>

7、點擊節點更改目錄展開狀態

tapOnNode:function(e){// 點擊節點時，折疊或展開結點（目錄）var tmpNode = e.currentTarget.dataset.node;var filename = tmpNode.filename;var nodes = this.data.treeBody;var node = this._findNodeByName(nodes,filename);if(!node){return;}if(node.isDir){if(node.expand){delete node.expand;}else{node["expand"] = 1;}}this._refreshTree(nodes);// 調用treeConfig.tapOnNodeif(this.data.treeConfig.tapOnNode){this.data.treeConfig.tapOnNode();}},

8、另一個問題

傳遞給子節點的數據為深復制之后的數組，所以改變子節點的數據，不會影響到父節點的數據。當父節點目錄折疊時，重新展開后，子節點的狀態無法保存。

解決方案：當子節點數據改變時，拋出一個自定義事件，父節點捕捉這個事件，同時更改自己的數據。

// 刷新樹_refreshTree:function(nodes){this.setData({treeBody : nodes,});// 然后向父結點拋出一個nodeChanged事件var filename = this.dataset.filename;var myEventDetail = { filename: filename,nodes: nodes,} // detail對象，提供給事件監聽函數var myEventOption = {} // 觸發事件的選項this.triggerEvent('nodechanged', myEventDetail, myEventOption)},_handleChildNodeChanged:function(e){// 處理子結點拋出的nodeChanged事件var filename = e.detail.filename;var nodes = this.data.treeBody;for (var i = 0; i < nodes.length; i++) {if (nodes[i].filename == filename) {nodes[i].data = e.detail.nodes;}}this.setData({treeBody: nodes,});},

總結

以上是生活随笔為你收集整理的列表对象转数组 微信小程序_微信小程序——无限递归的层次列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。