1、描述

整个.main-container分为三部分, 面包屑、内容显示区域、底部。现在 中部分页面需要监听滚动条的高度，当触及底部时需要像后台发起请求。这里采用监听vuex变量的方式，当 的滚动条触及底部时，变量+1，指定页面监听到变量发生变化就发起请求。考虑到下拉时存在多次请求的情况，这里做了防抖处理，只有myTestDataAntiShake为true时可以请求。刚触及底部时myTestDataAntiShake设置为false，只有请求响应后才设置为true。

2、使用

页面

<!-- 右侧内容区域 -->
        <div :class="{hasTagsView:needTagsView}" class="main-container" @click="closeSiderBar" ref="mainContainer">
          <div :class="{'fixed-header':fixedHeader}">
            <!-- -->
            <navbar />
            <tags-view v-if="needTagsView" />
          </div>
          <app-main />
          <div class="mbFooter" v-if="innerFooterFiewFlag && device != 'mobile'"><main-footer /></div>
        </div>
      </div>

js

// 监听滚动条变化
    addEventListerByMainContainer() {
      // 如果不是手机端，直接退出
      if(this.$store.getters.device != 'mobile') return;
      let self = this;
      const myTestDataTop = 50； // 顶部面包屑
      let dom = this.$refs.mainContainer;
      dom.addEventListener('scroll', () => {
          let routerPath = this.$route.path;
          if(self.fixdRouterPath.indexOf(routerPath) === -1) return;
          let scrollHeight = dom.scrollHeight, // 滚动页面高度
          scrollTop = dom.scrollTop, // 滚动条距离顶部位置
          clientHeight = dom.clientHeight; // 显示区域大小
          if(scrollTop > myTestDataTop) {
            switch (routerPath) {
              case "/testDetectionMobile/myTestData/myTestDataTable":
                 // 试验检测列表，用于固定头部显示区域
                 self.$store.dispatch("mobilescroll/setIsFixMytestData", true);
              break;
              case "/dataUpdate/myUploadDataMobile":
                // 试验结果列表，用于固定头部显示区域
                self.$store.dispatch("mobilescroll/setIsFixMyUploadData", true);
                break;
            }
          } else {
            switch (routerPath) {
               case "/testDetectionMobile/myTestData/myTestDataTable":
                 // 试验检测列表
                 self.$store.dispatch("mobilescroll/setIsFixMytestData", false);
              break;
              case "/dataUpdate/myUploadDataMobile":
                // 试验结果
                self.$store.dispatch("mobilescroll/setIsFixMyUploadData", false);
                break;
            }
          }
          // 当滑倒底部时，
          if(scrollTop + clientHeight - scrollHeight >= 0) {
             switch (routerPath) {
               case "/testDetectionMobile/myTestData/myTestDataTable":
                 // 试验检测列表
                  if(!self.myTestDataAntiShake) return; // 这里做下防抖，上次数据请求回来后才能再次触发
                  self.$store.dispatch("mobilescroll/setMyTestDataAntiShake", false);
                  let myTestDataRefresh = self.$store.getters.myTestDataRefresh;
                  // 页面会监听myTestDataRefresh的变化，发生变化时发起请求
                  self.$store.dispatch("mobilescroll/setMyTestDataRefresh", myTestDataRefresh + 1);
                 break;
                case "/dataUpdate/myUploadDataMobile":
                  // 试验结果
                  if(!self.myUploadDataAntiShake) return;
                  self.$store.dispatch("mobilescroll/setMyUploadDataAntiShake", false);
                  let myUploadDataRefresh = self.$store.getters.myUploadDataRefresh;
                  self.$store.dispatch("mobilescroll/setMyUploadDataRefresh", myUploadDataRefresh + 1);
                break;
             }
            
          }
      })
    }