微信小程序中做分类页面，两个scrool-view同时滚动的问题

本文主要是介绍微信小程序中做分类页面，两个scrool-view同时滚动的问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

　　今天做了一个练习的时候，遇到了一点点的问题，明明是写了两个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>

最后的效果如图：

这篇关于微信小程序中做分类页面，两个scrool-view同时滚动的问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！