最近、業界の選択のための需要がある、小さなプログラムを書いて、次のような効果を準備します。
達成するためにバン・崩壊やラジオボタンを使用します。
問題が発生した、〜ハハ、ハローの周りにあると推定され、8も可能である必要があり、死者10を書き、再帰のいくつかの層を知る必要はありません
オンラインビットを検索し、あなたが達成するための部品（コンポーネント）の方法を使用することができます。
特定以下を達成。
1.その後、崩壊ラジオのフォルダを作成してコンポーネントを生成する、「新しいコンポーネント」、という名前のインデックスを右クリックして、コンポーネントのフォルダを作成します。次のように構造化：
次のように図2に示すように、コードindex.wxmlファイルです。
<!--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 () { } })
就可实现递归效果。