异常处理——同一页面多个scroll-view组件时一起滚动的bug

WeChat小程序交流（QQ群：769977169）

根据业务需求，需要在同一个页面中使用到多个scroll-view组件，且都是垂直滚动的。如左边是商品的一级分类列表，右边是商品的二三级分类列表，一级分类列表上下滚动时不影响右边的二三级分类列表，右边的二三级分类列表上下滚动时也不影响左边的一级分类列表。

但如果没有处理好的话，则会造成一级分类列表上下滚动时，二三级分类列表同时上下滚动。

不正常的效果图

代码示例

xxx.wxml

<view style='display:flex;flex-direction:row;width:100%;height=100%'>  

  <scroll-view scroll-y class='leftStyle'>
    <block wx:for="{{typeNames}}">
      <view class='leftUIStyle {{item.selected ? "leftUISelectedStyle" : ""}}' bindtap='typeClick' data-index='{{item.index}}'>
        <view class='lineStyle' wx:if="{{item.selected}}"></view>
        <text class='{{item.selected ? "textSelectedStyle" : "textNormalStyle"}}'>{{item.name}}</text>
      </view>
    </block>
  </scroll-view>

  <scroll-view scroll-y class='rightStyle' bindscrolltoupper="scrollBottom">
    <block wx:for="{{typeLists}}">
      <view class='rightUIStyle'>
        <image class='rightImageStyle' src='{{item.header}}' mode='aspectFit'></image>
        <text class='rightTitleStyle'>{{item.screen_name}}</text>
        <text class='rightNumberStyle'>{{item.fans_count}}人关注</text>
        <button class='rightBtnStyle'>+关注</button>
      </view>
    </block>
  </scroll-view>

</view>  

xxx.wxss

.leftStyle{
  width: 20%;
  height: 100%;
}

.rightStyle{
  width: 80%;
  height: 100%;
  background-color: white;
}

正常的效果图

xxx.wxss

.leftStyle{
  width: 20%;
  height: 100%;
  position: fixed; 
}

.rightStyle{
  width: 80%;
  height: 100%;
  background-color: white;

  margin-left: 20%;
  float: right; 
}

注意：具体的解决方法是对于左边的 scroll-view 的样式设置中，添加position属性，且设置为fixed；对于右边的 scroll-view 的样式设置中添加两个属性，一个是float，且属性值为right，另一个是margin-left，且属性值是20%。实际项目中属性值根据业务需求来设置。