vue指令实现上下滚动翻页

效果

使用
直接将这段指令声明代码拷贝到需要使用该功能的vue实例上，当然你也可以全局注册

  directives: {
    bottomScroll: {
      inserted: function(el, binding) {
        let [clientHeight, scrollHeight] = [el.clientHeight, el.scrollHeight];
        el.addEventListener("scroll", e => {
          let [clientHeight, scrollHeight, scrollTop] = [
            el.clientHeight,
            el.scrollHeight,
            el.scrollTop
          ];
          if (clientHeight + scrollTop == scrollHeight) binding.value("bottom");
        });
      }
    },
    topScroll: {
      inserted: function(el, binding) {
        let [clientHeight, scrollHeight] = [el.clientHeight, el.scrollHeight];
        el.addEventListener("scroll", e => {
          if (el.scrollTop == 0) binding.value("top");
        });
      }
    }
  },

然在容器节点添加指令

 <div   v-bottomScroll="update" v-topScroll="updata" ref="resultList">
   
 </div>

updata为刷新方法可自行实现

哎 我已经过了挨行解释代码的年纪了啊…