夜光帶你走進 微信小程序開發（三十七）擅長的領域

夜光序言：

 

如果一開始你沒有告訴我，你永遠喜歡我，你永遠不會離開我，只要抱住你，就可以擁有整個世界。

 

 

 

 
 
正文：
 
                                              以道御術 / 以術識道

 

less代碼如下：

/* pages/category/category.wxss */
page{
  height: 100%;
}
.cates{
   height: 100%;
   .cates_container{
     //less中使用calc時候需要注意
     height: calc(100vh - 90rpx);
     display: flex;
     .left_menu{
         flex: 2;
         background-color: aqua;
     }
     .right_content{
         flex:5;
         background-color: antiquewhite;
     }
   }
}

wxss代碼如下：如果沒用less的話

/* pages/category/category.wxss */
page {
  height: 100%;
}
.cates {
  height: 100%;
}
.cates .cates_container {
  height: calc(100vh - 90rpx);
  display: flex;
}
.cates .cates_container .left_menu {
  flex: 2;
  background-color: aqua;
}
.cates .cates_container .right_content {
  flex: 5;
  background-color: antiquewhite;
}

wxml代碼：

<view class="cates">
<SearchInput></SearchInput>
<view class="cates_container">
     <!-- 左側菜單 -->
     <scroll-view scroll-y class="left_menu">
       <!-- view{$}*100     -->
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
     </scroll-view>
     <!-- 右側商品內容 -->
     <scroll-view scroll-y class="right_content">
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
      <view>1</view>
     </scroll-view>
</view>
</view>