Vue.js list scrolls to load components

export default {
  name: 'List'.props: {
    height: {
      type: Number.required: true
    },
    offset: {
      type: Number.default: 50
    },
    loading: {
      type: Boolean.default: false
    },
    finished: {
      type: Boolean.default: false
    },
    error: {type: Boolean.default: false
    },
    loadingText: {
      type: String.default: 'Loading'
    },
    finishedText: {
      type: String.default: 'There is no more'
    },
    errorText: {
      type: String.default: 'abnormal'}},data(){
    return {
      innerLoading: this.loading
    }
  },
  render: function (createElement) {
    let nodes = []
    this.innerLoading && !this.finished && nodes.push(createElement('div', {
      class: 'r-msg'
    }, this.$slots.loading || this.loadingText))

    this.finished && nodes.push(createElement('div', {
      class: 'r-msg'
    }, this.$slots.finished || this.finishedText))
    this.error && nodes.push(createElement('div', {
      class: 'r-msg-error'
    }, this.$slots.error || this.errorText))

    return createElement('div', {'class': {
        'r-list': true
      },
      ref: 'rListRef'.style: {height: `The ${this.height}px`
      }
    }, [
      createElement('div', {
        'class': {
          'r-list-content': true
        },
        ref: 'rListContentRef',
      }, [...this.$slots.default, ...nodes])
    ])
  },
  watch: {
    loading: 'check'.finished: 'check'
  },
  methods: {
    check(e) {
      this.$nextTick(() = >{
        if(this.innerLoading || this.finished || this.error || ! e){return
        }
        const contentHeight = this.$refs.rListContentRef.offsetHeight
        const colHeight = e.target.scrollTop + this.height
        if(colHeight >= (contentHeight - offset)) {
          this.innerLoading = true
          this.$emit('load')}})}},updated() {
    this.innerLoading = this.loading
  },
  mounted() {    
    this.$refs.rListRef.addEventListener('scroll'.this.check)
  },
  beforeDestroy(){
    this.$refs.rListRef.removeEventListener('scroll'.this.check)
  }
}
Copy the code