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爲刷新方法可自行實現

哎 我已經過了挨行解釋代碼的年紀了啊…