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

效果

思路：
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:

 <view class="container">
  <!--左侧栏-->
  <view class="leftview">
    <!--用数组填充左侧菜单页面-->
    <block wx:for="{
  {menuItems}}">
      <!--index是默认的数组下标，点击菜单，把index传给selectMenuID，