今天做了一個練習的時候，遇到了一點點的問題，明明是寫了兩個scrool-view，但是這兩個會同時的滾動。找了一下原因才知道是要給scrool-view所在的容器中新增高度，否則兩個會一起滾動。計算高度的時候，用到了calc，進行動態的計算，在less中使用calc的時候需要用~‘calc( 100vh - 90rpx )’的格式，否則會不成功。具體程式碼如下：

page {
  height: 100%;
}
.category_main {
  display: flex;
  height: 100%;
  .main_left { 
    flex:2;
    // less中使用calc
 

    height: ~'calc( 100vh - 90rpx)';
    .left_title {
      height: 80rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .active {
      background-color: var(--themeColor);
      color: #fff;
      //border-left: 10rpx solid var(--themeColor);

    }
  }
  .main_right {
    flex:
 
5;
    height: ~'calc( 100vh - 90rpx)';
    .item_content {  
      .content_title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 80rpx;
        padding: 0;
        .dilimer {}
        .text {padding: 0 20rpx;}
      }
      .content_item { 
        display: flex;
        align
 
-items: center;
        flex-wrap: wrap;
        text-align: center;
        .box { 
          width:33.33%;
          overflow:hidden;
          image {
            width: 50%;
          }
        }

      }
    }
  }
}

頁面樣式如下：

<view class="category_container">
  <!-- 引入元件 -->
  <SearchInput></SearchInput>
  <!-- 主題內容 -->
  <view class="category_main">
    <scroll-view class="main_left" scroll-y="true">
      <view bindtap="changeIndex" data-index="{{index}}" class="left_title {{selectIndex === index ? 'active': ''}}" wx:for="{{leftMenuList}}" wx:key="cat_id">
        {{item}}
      </view>
    </scroll-view>
    <scroll-view class="main_right" scroll-y="true" scroll-top="{{scrollTop}}">
      <!-- 第一層迴圈 -->
      <view class="item_content" wx:for="{{rightContent}}" wx:for-index="index1" wx:for-item="item1" wx:key="cat_id">
        <view class="content_title">
          <view class="dilimer">/</view>
          <view class="text">{{item1.cat_name}}</view>
          <view class="dilimer">/</view>
        </view>
        <!-- 第二層迴圈 -->
        <view class="content_item">
          <view class="box" wx:for="{{item1.children}}" wx:for-item="item2" wx:for-index="index2" wx:key="cat_id">
            <image src="{{item2.cat_icon}}" mode="widthFix"></image>
            <view class="txt">{{item2.cat_name}}</view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</view>

最後的效果如圖：