小程序循环列表点击展开收缩

<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"
  }
}