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

根据业务需求，需要在同一个页面中使用到多个scroll-view组件，且都是垂直滚动的。

例如左边是机型的一级分类列表，右边是机型的二级分类列表，一级分类列表上下滚动时不影响右边的二三级分类列表，右边的二级分类列表上下滚动时也不影响左边的一级分类列表。

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

代码示例：

***.wxml

<view class="catetory">
  <view class="cate_menu">
    <scroll-view scroll-y="{{true}}" class="left_menu">
      <view class="menu_item {{index===currentIndex?'active':''}}" wx:for="{{leftMenuList}}" wx:key="*this"
        bindtap="handleItemTap" data-index="{{index}}">
        {{index}}{{item}}
      </view>
    </scroll-view>
    <scroll-view scroll-y="{{true}}" class="right_content">
      <view class="content">
        <navigator class="content_item" wx:for="{{rightContent}}" wx:key="*this">{{item}}</navigator>
      </view>
    </scroll-view>
  </view>
</view>

---

***.js

// pages/category/category.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    leftMenuList: ['华为', 'vivo', 'OPPO', '苹果', '三星', '荣耀', 'iQOO', '小米', '一加', '魅族', 'realme', '努比亚', '红米', 'Moto', '中兴', '联想', '黑鲨'],
    rightContent: ["品牌", "手机名称", "发布会时间", "上市日期", "手机类型", "机身材质", "机身颜色", "指纹识别", "面部识别", "长度", "宽度",
      "厚度", "重量", "其他外观参数", "CPU型号", "CPU频率", "CPU核心数", "GPU型号", "RAM容量", "RAM存储类型",
      "ROM容量", "ROM存储类型", "存储卡", "出厂系统内核", "操作系统", "散热", "振动马达", "扬声器", "屏幕尺寸",
      "屏幕材质", "分辨率", "屏幕比例", "屏幕类型", "屏幕刷新率", "触控刷新率", "HDR技术", "对比度", "屏幕色彩",
      "屏幕技术", "摄像头总数", "后置摄像头", "前置摄像头", "传感器类型", "传感器型号", "闪光灯", "广角",
      "视频拍摄", "网络类型", "网络频段", "SIM卡类型", "WLAN功能", "定位导航", "蓝牙", "NFC", "红外功能", "连接与共享",
      "机身接口", "其他网络参数", "电池类型", "电池容量", "有线充电", "感应器", "游戏功能", "包装清单"],
    // 被点击的左侧的菜单
    currentIndex: 0,
  },

  // 左侧菜单的点击事件
  handleItemTap(e) {
    /*
    1 获取被点击的标题身上的索引
    2 给data中的currentIndex赋值就可以了
    */
    const {
      index
    } = e.currentTarget.dataset;
    this.setData({
      currentIndex: index,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  }
})

---

***.less (.wxss)

.catetory {
    height: 100%;
  .cate_menu {
    display: flex;
    height: 100%;
    .left_menu {
      flex: 2;
      justify-content: center;
      align-items: center;
      .menu_item {
        height: 80rpx;
      }
    }
    .right_content {
      flex: 5;
      .content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        .content_item {
            height: 100rpx;
          width: 50%;
        }
      }
    }
  }
}

---

解决方案就是在.wxss加上这么一个样式：

page {
    height: 100%;
  }