element select 实现滚动加载

2020-12-02  本文已影响0人  一碗米粉的故事

自己独立发布一个插件实现滚动加载使用

Vue.directive('loadmore', {
  bind (el, binding) {
    // 获取element-ui定义好的scroll盒子
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll', function () {
      
      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
      if (CONDITION) {
        binding.value()
      }
    })
  }
})
 v-loadmore="loadMore"

一个方法:loadmore
// 下拉加载
    loadmore() {
      this.formData.pageIndex++;
      this.getUsers(this.formData);
    },
 
 getUsers(v) {
      let num = ~~this.formData.pageIndex * ~~this.formData.pageSize;
      this.userItems = this.users.filter((item, index, arr) => {
        return index < num;
      });
    },
上一篇 下一篇

猜你喜欢

热点阅读