效果 思路： 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，三元表示式判斷selectMenuID是否是當前index，子選單用不同樣式-->
      <view class=" {{selectMenuID == index ? 'activemenu' : 'normalmenu'}}" bindtap="switchToRight"  data-index="{{index}}">{{item}}
      </view>
    </block>
  </view>
  <!--右側欄-->
  <view class="rightview">
    <!--判斷selectMenuID值顯示不同頁面-->
     <view wx:if={{selectMenuID==1}}>
         .....
     </view>
      <view wx:if={{selectMenuID==2}}>
         .....
     </view>
  </view>
 

樣式框架

  <view class="container">
        <view class="left">
            <block....>
                  <view class="{{selectMenuID==index?submenu_active:submenu">
                  </view>
            </block>
        </view>
        <view class="right">
        </view>
 </view>
 

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;
    }