实现vue模态框进行滚动加载

**

实现vue模态框进行滚动加载

在我写项目的时候，有这样一个需求，打开一个模态框，对数据进行滚动加载，当时我使用了antd-vue中的list列表无限加载，但是不生效。我就自己写了一个滚动加载。话不多说，请看代码。

<div @click.stop>
                  <a-input :value="formData.selectName" style="width: 220px;position:relative;" placeholder="请输入姓名"
                           @focus="FunFocusInput" @change="SetVal">
                    <a-icon slot="suffix" :type="showPanel ? 'up' : 'down'" class="input-icon" />
                  </a-input>
                  <transition name="fadeDown">
                    <div v-if="showPanel" class="panel_wrap" style="width: 220px;">
                      <a-input style="width: 220px;position:absolute;" class="input_B" placeholder="请输入姓名"
                               :value="formData.selectName" @change="SetVal">
                        <a-icon slot="suffix" :type="showPanel ? 'up' : 'down'" class="input-icon" />
                      </a-input>
                      <div id="Panel_Scroll_Wrap" ref="Panel_Scroll_Wrap" class="panel_scroll_wrap"
                           style="height: 200px" @scroll="Scroll">
                        <div style="height: 40px;" class="panel_li" v-for="item in lists" :key="item.id"
                             @click="FunSelectItem(item)">
                          <span>{{
                            这里面写你要渲染的数据
                          }}</span>
                        </div>
                        <div v-if="scrollLoading">
                          <a-spin class="scroll_loading" v-if="scrollLoading" size="small" />
                        </div>
                        <p class="no_data" v-if="!listLoading && lists.length === 0">
                          暂无数据
                        </p>
                      </div>
                    </div>
                  </transition>
                </div>

// 滚动条滚动到盒子的底部触发
async Scroll (e) {
      if (this.showPanel) {
        let sListH = this.$refs['Panel_Scroll_Wrap'].scrollHeight // 滚动条高度
        let sToTop = this.$refs['Panel_Scroll_Wrap'].scrollTop // 滚动条距离顶部的距离
        let boxH = this.$refs['Panel_Scroll_Wrap'].clientHeight // 滚动条外容器的高度
        console.log(
          'boxH--',
          boxH,
          '',
          'sToTop--',
          sToTop,
          '',
          'sListH--',
          sListH
        )
        if (boxH + sToTop >= sListH) {
          this.pageIndex += 1
          this.scrollLoading = true
          await //这里写你的请求数据方法  再次调用把 page，size  传入 
          this.scrollLoading = false
        }
      }
    },
     // 列表选择事件
    FunSelectItem (item) {
      this.showSelect = 1
      if (item.number === null || item.number === '') {
        this.formData.selectName = item.personName
      } else {
        this.formData.selectName = item.personName + ' / ' + item.number
      }
      this.formData.orgName = item.orgName
      this.editId = item.personId
      this.HideTimePikerFun()
    },
      // 下拉列表激活
    async FunFocusInput (e) {
      this.searchNameVal = e.target.value
      this.showPanel = true
      this.listLoading = true
      await this.FunGetListData()
      this.listLoading = false
      }
       // 点击其他位置隐藏列表 
    HideTimePikerFun () {
        this.showPanel = false
        this.pageIndex = 1
        this.pageSize = 10
        this.scrollBoxHeight = 0
        this.scrollListHeight = 0
        this.cutHeight = 0
        this.listLoading = false
        this.scrollLoading = false
        this.lists = []
        this.searchNameVal = ''
      }

<style lang="less" scoped>
.p-modal {
  // 暂无数据
  .no_data {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
  }

  // 输入框图标
  .input_icon {
    color: rgba(0, 0, 0, 0.25);
    font-size: 12px;
  }

  // 基准输入框
  .input_A {
    position: relative;
  }
  .input_B {
    position: absolute;
  }

  // 下拉框外层
  .panel_wrap {
    width: 100%;
    position: absolute;
    z-index: 9999 !important;
    top: 3px;
    // 上面的.ant-input的height=40px时, top可为0px
    background: #ffffff;
  }

  // 滚动区域外层
  .panel_scroll_wrap {
    margin-top: 35px;
    overflow-y: auto;
    background: #ffffff;
    background-clip: padding-box;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-radius: 3px;
  }
  .panel_scroll_wrap::-webkit-scrollbar {
    width: 0px;
  }

  // ul样式
  .panel_ul {
    background: #ffffff;
    outline: none;
    margin: 0;
    padding: 0;
  }

  // li样式
  .panel_li {
    padding: 0 5px;
    &:hover {
      background: #f0f4ff;
      cursor: pointer;
    }
  }

  // 懒加载loading样式
  .scroll_loading {
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    // background: darkcyan;
  }
}
.account-type {
  .top-btn {
    display: flex;
    height: 80px;
    padding: 24px;
    background: #ffffff;
    border-radius: 10px;
  }
}
.panel-wrap {
  position: absolute;
  z-index: 999;
  width: 100%;
  background: #ffffff;
}
.panel-ul {
  // background: crimson;
  background: #ffffff;
  width: 200px;
  height: 200px;
  border-radius: 3px;
  outline: none;
  -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  .panel-li {
    height: 40px;
    padding: 0 5px;
    &:hover {
      background: #f0f4ff;
      cursor: pointer;
    }
  }
  .panel-loading {
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    // background: darkcyan;
  }
}
.panel-ul::-webkit-scrollbar {
  width: 0px;
}
.fadeDown-enter-active {
  animation: slide-in 0.06s;
}
.fadeDown-leave-active {
  animation: slide-in 0.06s reverse;
}
@keyframes slide-in {
  0% {
    height: 0;
  }

  100% {
    height: 228px;
  }
}
.input-icon {
  // 输入框图标
  color: rgba(0, 0, 0, 0.25);
  font-size: 12px;
}
</style>

不清楚为什么 ，在模态框里，无法获取select的滚动事件。我是一个代码小白。嘻嘻