vue项目下拉加载自定义指令实现

最近接触到一个需求——pc端下拉加载的功能，在弹窗内部实现下拉加载分页，主要就是通过判断滚动条的距离底部的距离改变pageNum值加载新的数据。本章是通过自定义vue指令完成这一需求

效果图是一个分两栏显示的弹窗，在一个弹窗内部实现下拉加载，又想法的小伙伴可以在下拉加载过程中添加相关loading动画展示。。。

操作比较简单，废话不多说了，简单粗暴直接贴代码。。。。。。

<template><div class="left-content" v-loadmore="loadmore"></div>
</template>
<script>export default{directives: {loadmore: {bind(el, binding) {   var p = 0;   var t = 0;   var down = true;   //这里是：拿到当前绑定的dom，并监听当前的dom的scroll事件完成下拉加载var selectWrap = elselectWrap.addEventListener('scroll', function() {     //判断是否向下滚动     p = this.scrollTop;  if(t < p){     down = true;     }else{       down = false;     }     t = p;     //判断是否到底     const sign = 10;     const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight;     if (scrollDistance <= sign && down) {       binding.value()     }   }); }}},data(){rollflag:false},created:{this.getData()},methods:{//获取数据getData(){//接口请求成功后把rollflag置为true},//滚动加载数据loadmore() {if (this.rollflag) { //这里是业务场景判断是否需要加载新的数据if(this.pageInfo.remainTotal>this.pageInfo.curPageSize){this.rollflag = false;this.pageNum++;this.getData()}else{return};}},}}</script>
<style></style>