夜光带你走进 微信小程序开发（三十七）擅长的领域

夜光序言：

 

如果一开始你没有告诉我，你永远喜欢我，你永远不会离开我，只要抱住你，就可以拥有整个世界。

 

 

 

 
 
正文：
 
                                              以道御术 / 以术识道

 

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>