微信小程序开发一个类似于element ui的后台左侧导航栏

1、导航栏可显示隐藏

2、导航栏有面包屑

3、二级导航栏点击之后切换到对应导航栏并隐藏

wxml相关代码：

<scroll-view class="page" scroll-y>
  <view class="content">
    <view class="header flex-start">
      <text class="iconfont icon-aside-open" wx:if="{{show}}" bindtap="checkShow"></text>
      <text class="iconfont icon-aside-collpse" wx:else bindtap="checkShow"></text>
      <view style="display:inline;margin-left:20rpx;color:#333;">
        <text>{{items[mainActiveIndex].text}}</text>/
        <text>{{text}}</text>
      </view>
    </view>
    <van-transition show="{{ show }}" custom-class="block" name="fade-left">
      <view class="leftAside">
        <view class="custom_aside">
          <view class="{{mainActiveIndex == index ?'custom_aside_item aside_item_active':'custom_aside_item'}}" wx:for="{{items}}" wx:key="index" bind:tap="onClickNav" data-index="{{index}}">
            <text class="{{'iconfont icon-aside-'+item.icon}}"></text>
            <text style="margin-left:10rpx">{{item.text}}</text>
            <van-transition show="{{ item.show }}" custom-class="child_block" name="fade-left">
              <view class="child_aside" wx:if="{{item.show}}">
                <view class="{{activeId == asideItem.id?'child_aside_item_acitive child_aside_item':'child_aside_item'}}" wx:for="{{item.children}}" wx:for-item="asideItem" wx:for-index="asideIndex" data-pindex="{{index}}" data-id="{{asideItem.id}}" data-text="{{asideItem.text}}" catch:tap="onClickItem">
                  <text>{{asideItem.text}}</text>
                </view>
              </view>
            </van-transition>

          </view>
        </view>
      </view>
    </van-transition>

    <view class="center_cont">
         <text>中间内容</text>
    </view>
  </view>
</scroll-view>

css相关代码：

.page{
  height:100vh;
 
}
.content{
  position: relative;
  height:100%;
  width: 100%;
  background-color: #f5f5f5;
}
.header{
  height:80rpx;
  padding:20rpx 30rpx;
  box-sizing: border-box;

}
.header .iconfont{
  font-size: 60rpx;
  color: #539be8;
}
.leftAside{
  position: absolute;
  top:80rpx;
  left:0;
  width: auto;
  height:100%;
  background-color: #324157;
  z-index: 9999;
  border: 1px solid #e7e7e7;
}
/*自定义类似于pc端导航栏 */
.custom_aside{
  height:100%;
  width:auto;
  padding:15rpx;
  background-color: #324157;
}
.custom_aside_item{
  position: relative;
  height: 80rpx;
  line-height: 80rpx;
  color:#a1a0a0;
  font-size: 24rpx;
}
.custom_aside_item .iconfont{
  font-size: 34rpx;
  
}
.aside_item_active{
  color:#539be8;
}
.aside_item_active .iconfont{
  color:#539be8;
}

.child_aside{
  position: absolute;
  top:0rpx;
  right:-200rpx;
  height:auto;
  width: 180rpx;
  background-color:#324157;
  border-radius: 10rpx;
  overflow: hidden;
  color:rgba(248, 245, 245,.5);
  white-space: nowrap;
}

.child_aside_item{
  width: 100%;
  font-size: 24rpx;
  padding:10rpx 15rpx;box-sizing: border-box;
  background-color:#324157;
}
.child_aside_item_acitive{
  background-color: #283446;
}



.center_cont{
  width:100%;
  height:auto;
  border: 1px solid green;
}

js相关代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    show:true,
    items: [{
      text: '管理1',
      icon: 'list',
      show:false,
      children: [{
          // 名称
          text: '列表1',
          id: 1,
        },
        {
          text: '列表2',
          id: 2,
        },
        {
          // 名称
          text: '列表3',
          id: 3
        },
        {
          text: '列表4',
          id: 4,
        },
        {
          text: '列表5',
          id: 5,
        },
      ],
    }, {
      text: '管理2',
      icon:'contract',
      show:false,
      children: [{
          // 名称
          text: '列表6',
          // id，作为匹配选中状态的标识
          id: 6
        },
        {
          text: '列表7',
          id: 7,
        }
      ],
    }],
    mainActiveIndex: 0,
    activeId: 1,
    activeIdtext:'',
    text:'列表1'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onClickNav(e) {
    var that = this;
    let index = e.currentTarget.dataset.index;
    let key = 'items['+index+'].show'
    this.data.items.map(item=>item.show = false)
    this.setData({
      items:this.data.items,
      mainActiveIndex: index,
      [key]:true,
      activeId:this.data.items[index].children[0].id,
      text:this.data.items[index].children[0].text,
    });
  },

  onClickItem(e) {
    let id = e.currentTarget.dataset.id;
    let text = e.currentTarget.dataset.text;
    let parent_index = e.currentTarget.dataset.pindex;
    let key = 'items['+parent_index+'].show'
    this.setData({
      activeId:id,
      text
    });
    setTimeout(()=>{
      this.setData({
        [key]:false
      });
    },500);
    
  },
  checkShow() { //切换侧边栏显示隐藏
    this.setData({
      show: !this.data.show
    })
  }
})