Drop down load data waterfall stream load

  1. Create file js
export const selectLoadmore = {
  bind(el, binding) {
    // Get the Scroll box defined by element-ui
    const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
    SELECTWRAP_DOM.addEventListener('scroll'.function () {
      /* * scrollHeight Gets or sets the element's offset, often used to calculate the scrollbar position when an element's container does not produce vertical scrollbars. * clientHeight reads the visible height of the element (read only) * The following equation returns true if the element scrolls to the bottom, false if it does not: * ele.scrollHeight - ele.scrollTop === ele.clientHeight; * /
      const CONDITION = this.scrollHeight - this.scrollTop <= this.clientHeight
      if (CONDITION) {
        binding.value()
      }
    })
  }
}
Copy the code
  1. use
import { selectLoadmore } from '@/utils/dire'
<script>
export default {
  	name: 'NetworkSelect'.directives: {
    	selectLoadmore
  	},
}
</script>

Copy the code
  1. Where it’s used v-select-loadmore=” loadmore “will do the job, scrolling down the page to request data, Page++ will do the job
  2. I wish to record