微信小程序基础-侧边菜单的实现

效果

思路：
1、整个页面分成左右两个view，横向布局；左侧view用子菜单view一个个填充，纵向布局。
2、子菜单内容存入数组，点击子菜单view，用data-index="{{index}}"回传数组索引index，把index赋给程序数据selectMenuID。
3、在wxml判断selectMenuID==index时，改变点击子菜单的样式，显示不同的右侧页面
4、右侧view根据selectMenuID用wx:if显示相应页面
具体代码如下：
js:

data:{
     menuItems: ['宝宝奶粉','纸尿裤','母婴专区','营养保健','进口美食','护肤美体','居家日用','婴儿辅食','特惠促销'],
     selectMenuID:0
}

wxml:

 
  
  
    
    
      
      {{item}}
      
    
  
  
  
    
     
         .....
     
      
         .....
     
  

样式框架

WXSS:采用flex布局

 .container{
        display:flex;
        flex-direction:row;
        height:1200rpx;/*不设高度好像不行，如果有解决办法请告知*/
    }
    .left{
        display:flex;
        flex-direction:column;
    }
    /**没选中时子菜单样式**/
    .submenu{
        width:...
        height:...
        background-color:#F0F0F0;
    }
    /**选中时子菜单样式**/
    .submenu_active{
       width:...
        height:...
        background-color:#FFFFFF;
    }