——上禮拜踩的坑

1、關(guān)于為什么不直接操作DOM對(duì)象？

因?yàn)槲⑿判〕绦蚶餂](méi)有document對(duì)象。

2、為什么坑了這多時(shí)間？

因?yàn)橹翱戳藗€(gè)過(guò)期的帖子，完美避開(kāi)了解決方案。

下面進(jìn)入正文，需求是在微信小程序里構(gòu)造一棵文件樹(shù)。

3、解決思路

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

4、自定義組件.json文件

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

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

“alexTree”是組件里引用自己時(shí)用的標(biāo)簽名，理論上是可以自定義的，只要在wxml文件j里對(duì)應(yīng)起來(lái)就好。

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) {}},},

主要定義了兩個(gè)屬性，一個(gè)是數(shù)據(jù)tree-body，一個(gè)是配置tree-config。

數(shù)據(jù)結(jié)構(gòu)本身當(dāng)然也是遞歸的。tree-body是一個(gè)數(shù)組（根目錄），其中的元素作為文件，一個(gè)文件可以是一個(gè)普通文件，也可以是一個(gè)目錄文件，用元素的isDir屬性來(lái)區(qū)分，如下：

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

filename是文件名，當(dāng)isDir為true時(shí)，data為子文件數(shù)組，當(dāng)isDir為false時(shí)，data為與文件相關(guān)的自定義數(shù)據(jù)，例如文件在服務(wù)器的url等。

6、 wxml大致結(jié)構(gòu)。

<view wx:for="{{treeBody}}"><!-- 這里為當(dāng)前節(jié)點(diǎn)的構(gòu)造邏輯 --><view class='treeNode' catchtap="tapOnNode" data-node='{{item}}'> <<<<<<vviieew>>>>>>>>><!-- balabala --><!-- balabala --><!-- balabala --><!-- 然后判斷此節(jié)點(diǎn)是否展開(kāi)，下面的邏輯里，如果這個(gè)節(jié)點(diǎn)為展開(kāi)狀態(tài)的目錄，就遞歸此組件 --><!-- 注意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、點(diǎn)擊節(jié)點(diǎn)更改目錄展開(kāi)狀態(tài)

tapOnNode:function(e){// 點(diǎn)擊節(jié)點(diǎn)時(shí)，折疊或展開(kāi)結(jié)點(diǎn)（目錄）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);// 調(diào)用treeConfig.tapOnNodeif(this.data.treeConfig.tapOnNode){this.data.treeConfig.tapOnNode();}},

8、另一個(gè)問(wèn)題

傳遞給子節(jié)點(diǎn)的數(shù)據(jù)為深復(fù)制之后的數(shù)組，所以改變子節(jié)點(diǎn)的數(shù)據(jù)，不會(huì)影響到父節(jié)點(diǎn)的數(shù)據(jù)。當(dāng)父節(jié)點(diǎn)目錄折疊時(shí)，重新展開(kāi)后，子節(jié)點(diǎn)的狀態(tài)無(wú)法保存。

解決方案：當(dāng)子節(jié)點(diǎn)數(shù)據(jù)改變時(shí)，拋出一個(gè)自定義事件，父節(jié)點(diǎn)捕捉這個(gè)事件，同時(shí)更改自己的數(shù)據(jù)。

// 刷新樹(shù)_refreshTree:function(nodes){this.setData({treeBody : nodes,});// 然后向父結(jié)點(diǎn)拋出一個(gè)nodeChanged事件var filename = this.dataset.filename;var myEventDetail = { filename: filename,nodes: nodes,} // detail對(duì)象，提供給事件監(jiān)聽(tīng)函數(shù)var myEventOption = {} // 觸發(fā)事件的選項(xiàng)this.triggerEvent('nodechanged', myEventDetail, myEventOption)},_handleChildNodeChanged:function(e){// 處理子結(jié)點(diǎn)拋出的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,});},

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。