首先在main.js文件注冊(cè)全局事件,代碼如下:
Vue.directive('loadmore', {
? bind(el, binding) {
? ? var p = 0;
? ? var t = 0;
? ? var down = true;
? ? var selectWrap = el.querySelector('.el-table__body-wrapper')
? ? selectWrap.addEventListener('scroll', function() {
? ? ? //判斷是否向下滾動(dòng)
? ? ? p = this.scrollTop;
? ? ? // if ( t < p){down=true}else{down=false}
? ? ? 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()
? ? ? }
? ? })
? }
})
在組件中,使用自定義的事件:
v-loadmore="loadMore"
在methods中調(diào)用loadMore
這樣就實(shí)現(xiàn)啦!4⒚怠岩睁!