vue 如何实现对弹窗中的列表进行滚动分页加载数据

html:

<div class="userList" v-loading="usrLoading" ref="userListBox">
    <ul v-if="userListData!=''"  style="minHeight: 300px">
        <li v-for="(item,i) in userListData"  :value="item.id" @click="checkedUser(item,item.id)" :class="activeNum === item.id ? 'active' : ''">
            {{item.loginName}}
            <svg-icon slot="prefix" icon-class="icon_xz"></svg-icon>
        </li>
    </ul>
</div>

js：

watch:{
  //监听弹窗显示的变量值
  addDialogFlag:{//弹窗是否显示的变量值
    handler(val){
      if(val){//如果弹窗显示
        this.$nextTick(()=>{//在dom节点渲染完后，增加监听滚动条事件
          this.$refs.userListBox.addEventListener('scroll',this.scrollGetUserList)
        })
      }
    }
  }
},

destroy(){//vue的页面销毁后执行的钩子
  //页面销毁时，解绑用户列表滚动事件
  this.$refs.userListBox.removeEventlistener('scroll',this.scrollGetUserList,false);
},
methods:{

//分页渲染用户列表数据
scrollGetUserList(e){
  const scrollTop=e.target.scrollTop//滚动条滚动时，距离顶部的距离
  const windowHeight=e.target.clientHeight //可视区域的高度
  const scrollHeight=e.target.scrollHeight//滚动条的总高度
  //滚动条到底部时
  if(scrollTop+windowHeight===scrollHeight && this.userListData.length>=this.userListOnePageNumber){
    this.userListPage++;
    if(this.userListPage>this.userListPageCount){
      return false;
    }
    this.userList();//去请求数据的方法，根据自己的需求去写
    
  }

},

}