vue directives指令实现滚动加载

directives：{
    // 向上滚动


      loadmassge:{


        bind(el,binding,context){


            el.addEventListener(scroll,_.debounce(e=>{


                is(e.target.scrollTop===0&&_.isFunction(binding.value)){


                binding.value()


                }


            },50))


        }


      },


      //向下滚动


      loadmore:{


        bind(el, binding) {
          const selectWrap = el.querySelector('.el-table__body-wrapper')
          selectWrap.addEventListener('scroll', function() {
              let sign = 100
              const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
              if (scrollDistance <= sign) {
              binding.value()
              }
          })
        }


      }






      }


      methods:{


      //向上滚动调用方法同下


      loadMassage(){


      },


      //向下滚动调用方法


      loadMore () {
        if (this.loadSign) {
              this.loadSign = false
              this.page++
              if (this.page > 10) {
                  return
              }
        setTimeout(() => {
            this.loadSign = true
            }, 1000)
            console.log('到底了', this.page)
        }


      },


      //向上滚动 提前定位


      scrollToAnchor(anchor){


          try{


              const $chats = this.$ref.chats


             // 滚动位置偏移


              let offset = $chats.scrollHeight


              if(anchor&&anchor.chatkey){


                      offset = document.querySelector(`#${anchor.chatkey}`).offsetTop


                  }


                  $chats.scrollTop = math.max(offset -$chats .offsetTop,0)


          }catch(e){


          console.log(e)


      }


    }


      }






      <div v-loadmore="loadMore"></div>


      <div v-loadmore="loadMassage" ref="chats"></div>