首先了解我做的树形是怎样的:(如图所示)
ok,百度一下:微信小程序如何做树形菜单,其中有一个是这样的:大佬的例子
但他这个是vue的,稍微改一下就差不多了,现在了解一下wx:for的语法(暂时没找到官方的,找到再更新)。
代码(只显示2级树形菜单,思路见后面):
wxml(样式直接写了)
<view bindtap="clickTone" style="width: 37vw;height:10vh;display:flex;justify-content: space-between;border-radius: 0.5vw;margin-top: 0.8vw;">
<view style="display: flex;flex-direction: row;align-items: center;">
<image src="../../src/static/timbreselect.png" mode="widthFix" style="width: 2vw;margin-left: 1.5vw;"></image>
<text style="margin-left: 1vw;">音色选择</text>
</view>
<view style="padding-right: 1.2vw;display:flex;align-items: center;">
<text style="margin-right: 1vw;font-weight:200;">迪斯科风格</text>
<!-- 箭头切换 -->
<image hidden="{{isExpand}}" src="../../src/static/right_arrow.png" mode="widthFix" style="width: 15rpx; height: 15rpx;"></image>
<image hidden="{{!isExpand}}" src="../../src/static/down_arrow.png" mode="widthFix" style="width: 15rpx; height: 15rpx;"></image>
</view>
</view>
<!-- 一级分类 -->
<view wx:if="{{isExpand}}">
<view wx:for="{{PCList}}" wx:for-index="outerindex" wx:key="outerindex" wx:for-item="outeritem">
<view bind:tap="unshow" data-index="{{outerindex}}" style="width: 36vw;height: 8vh;display: flex;align-items: center;">
<view style="width: 36vw;display: flex;justify-content: space-between;">
<view style="width: 25vw;margin-left: 1.8vw;display: flex;flex-direction: row;">
<view style="width: 2vw;margin-right: 1vw;">
<image src="../../src/static/gou.png" mode="widthFix" style="width: 15rpx; height: 15rpx;" wx:if="{{outeritem.gou}}"></image>
</view>
<text>{{outeritem.name}}</text>
</view>
<view style="width: 4vw;">
<view wx:if="{{outeritem.show}}">
<image src="../../src/static/down_arrow.png" mode="widthFix" style="width: 15rpx; height: 15rpx;"></image>
</view>
<view wx:else>
<image src="../../src/static/right_arrow.png" mode="widthFix" style="width: 15rpx; height: 15rpx;"></image>
</view>
</view>
</view>
</view>
<!-- 二级分类 -->
<view wx:for="{{outeritem.children}}" wx:if="{{outeritem.show}}" wx:key="inneritem" wx:for-item="inneritem" wx:for-index="innerindex" style="width: 100%;height: 8vh;">
<view style="width: 25vw;margin-left: 3.6vw;display: flex;flex-direction: row;justify-content: flex-start;">
<view style="width: 2vw;margin-right: 1vw;">
<image src="../../src/static/gou.png" mode="widthFix" style="width: 15rpx; height: 15rpx;" wx:if="{{inneritem.gou2}}"></image>
</view>
<text>{{inneritem.name}}</text>
</view>
</view>
</view>
</view>
js:(其中PCList变量)
let outerArray =["电子类","放克&RNB类"]; //假设1级只有2个元素
let innerArray=["电鼓风格1","电鼓风格2","电鼓风格3","嘻哈工作室风格"]
let falseArray = Array.from({ length:3 }, () => false);
let pcArray = [];
for (let i = 0; i < outerArray .length; i++) {
let option = {
id: i,
name: outerArray [i]
show: false,
children: []
}
pcArray.push(option);
}
let coption;
for (let i = 0; i < innerArray.length; i++) { //目前只做第一个1级的元素,自己扩充
coption={
name: innerArray[i],
};
pcArray[0].children.push(coption)
}
this.setData({
PCList: pcArray
})
思路解析:
精髓:内部的wx:for通过读取外部的wx:for的元素中的children(这个可以是其他变量,但要是上一级中的)进行取值,然后才可以进行展开,更多层级亦是包裹到上一级的children就行。