Micro-channel to generate the applet pages recursively

Recently wrote a small program, there is a demand for the industry's choice, prepare the following effects:

Use van-collapse and radio buttons to achieve.

Encounter a problem, do not need to know several layers of recursion, write 10 dead, 8 should also be possible, estimated to be around the halo, ha ha ~

Online search a bit, you can use the component (Component) way to achieve.

Specific achieve the following:

1. Create a component folder, then create a collapse-radio folder, right-click on the "New Component", named index, generating component. Structured as follows:

2, the code index.wxml file is as follows:

<!--component/collapse-radio/index.wxml-->
<van-collapse value="{{ activeName[item.id] }}" data-id="{{item.id}}" bind:change="onChange" accordion>
  <view wx:for="{{item.children}}" wx:key="id">
    <van-collapse-item wx:if="{{!item.is_leaf}}" title="{{item.name}}" name="{{item.id}}" data-index="{{index}}" data-id="{{item.id}}">
      <collapse-radio item="{{item}}"></collapse-radio>
    </van-collapse-item>
    <view wx:else> 
      <van-cell title="{{item.name}}" value-class="value-class">
        <van-radio name="{{item.id}}" />
      </van-cell>
    </view>
  </view>
</van-collapse>

3、index.js代码如下：

// component/collapse-radio/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    item: Object
  },

  /**
   * 组件的初始数据
   */
  data: {
    activeName: {}
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 展开面板
    onChange(event) {
      console.log(event);
      const id = event.target.dataset.id;
      const activeName = this.data.activeName;
      activeName[id] = event.detail;
      console.log(activeName);
      this.setData({
        activeName: activeName
      });
    }
    
  }
})

4、在app.json中配置组件：

5、在页面中使用

<van-radio-group>
  <collapse-radio item="{{item}}"></collapse-radio>
</van-radio-group>

6、js代码

const list = [{
  id: '1',
  name: '金融业',
  is_leaf: 0,
  children: [{
    id: '11',
    name: '银行业',
    is_leaf: 0,
    children: [{
      id: '111',
      name: '中央银行',
      is_leaf: 1
    }, {
      id: '112',
      name: '商业银行',
      is_leaf: 1
    }, {
      id: '113',
      name: '其他银行',
      is_leaf: 1
    }]
  }, {
    id: '12',
    name: '证券业',
    is_leaf: 1
  }, {
    id: '13',
    name: '保险业',
    is_leaf: 0
  }]
},{
  id: '2',
  name: '教育业',
  is_leaf: 1
}, {
  id: '3',
  name: '房地产业',
  is_leaf: 0
}];
Page({

  /**
   * 页面的初始数据
   */
  data: {
    item:{
      id: '0',
      name: '',
      is_leaf: 0,
      children:list
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

就可实现递归效果。

Micro-channel to generate the applet pages recursively

Guess you like