<view><scroll-viewstyle="background:white"class="con"><viewbindtap='tapItem'data-id='{{ model.id }}'data-text='{{ model.name }}'data-nodes="{{model.nodes}}"class="text">{{ model.name }}</view><viewwx:if='{{ isBranch }}'bindtap='toggle'class="img"><imagesrc=" {{ open ? '../../images/down.png' : '../../images/right1.png' }}"></image></view><viewwx:elseclass="imgnone"></view></scroll-view><viewwx:if='{{ isBranch }}'hidden='{{ !open }}'><mytreewx:for='{{ model.nodes }}'wx:key='id'model='{{ item }}'></mytree></view></view>
Component({ properties: { model: Object, }, data: { open: false, isBranch: false, }, methods: { toggle: function (e) { if (this.data.isBranch) { this.setData({ open: !this.data.open, }) } }, tapItem: function (e) { var itemid = e.currentTarget.dataset.id; var text = e.currentTarget.dataset.text; var nodes = e.currentTarget.dataset.nodes this.triggerEvent('tapitem', { id: itemid, text: text,nodes:nodes},{ bubbles: true, composed: true }); //console.log('arr', this.properties.model) }, }, ready: function (e) { //console.log(this.data); this.setData({ isBranch: Boolean(this.data.model.nodes && this.data.model.nodes.length), }); }, })
/* pages/tree/tree.wxss */ .con image{ width: 25px; height: 25px; margin-top: 12px; } .con{ width: 100%; height: 50px; line-height: 50px; border-bottom: 1px solid rgb(228, 227, 227); } .text{ float: left; margin-left: 3%; width: 60%; } .img{ text-align: right; } .imgnone{ width: 100%; height: 100%; background-color: rgb(241, 246, 247); }
{ "component": true, "usingComponents": { "mytree": "../tree/tree" } }