vue滚动加载列表数据展示封装懒加载

在首页的某个组件里数据列表展示要求:

数据列表展示前两条数据,其他数据通过滚动条查看(出于性能要求:滚动查看数据的时候请求数据进行展示)

方法1.根据视图高度滚动加载

1.组件内定义唯一标识id   html:

<template>
  <div id="scrollFlag"
   >组件的数据内容</span>
</template>

2.监听滚动事件 js:

methods: {
    // 监听滚动事件
    listenerFunction(){
      const dom = document.querySelector('#scrollFlag')
      dom.addEventListener('scroll',this.handleScroll,true)
    },
    handleScroll(e){
      let el = e.target
      if(el.scrollTop +el.clientHeight >= el.scrollHeight){
        // 性能问题 第一次请求返回10条数据 可以有滚动的可能,不至于连续触发滚动事件 后续每次滚动 返回数据+5
        this.formlist.pageSize = this.formlist.pageSize + 5
        this.getListDetail()
}
    },
    getListDetail(){
      let params = {
        pageSize: this.formlist.pageSize
        // 其他参数
      }
      getListInfoDetail(params).then(res=>{
        if(res.status === '200'){
          if(res.data && res.data.list&&res.data.list.length >0){
            res.data.list.forEach(item=> {
              // 可以对item 的值进行处理
            });
            this.assetsList = res.data.list
          }
        }else {
          this.formlist.pageNum = 1
          this.formlist.pageSize = 10
        }
      }).catch((err)=>{this.$MesssgeError(err)})
      },
  },
  mounted() {
    // 滚动事件 滚动事件操作了dom 只能放在,mounted 里面
    this.listenerFunction()
  },

这样处理的话就会有一个问题,就是无法识别最后一次加载的数据就是最后一条数据,这样就会多加载一次,

方法2: 懒加载

1.封装懒加载

// 封装自定义指令
import Vue from 'vue'
//v-1azy 用于监听绑定元素可见性
//示例v-1azy="{lazy:lazyLoad,1azyParam:index}"，元素可见时，执行1azyLoad方法，并传入1azyparam参数
Vue.directive('lazy', {
  bind(el, binding) {
    try {
      let lazyObserver = new IntersectionObserver((entries, observe) => {
        try {
          entries.forEach(entry => {
            if (entry.intersectionRatio > 0) {
              binding.value.lazy(binding.value.lazyParam)
            }
          })
        } catch (error) {
          binding.value.lazy(binding.value.lazyParam)
        }
      })
      lazyObserver.observe(el)
    } catch (error) {
      binding.value.lazy(binding.value.lazyParam)
    }
  }
})

2.使用懒加载

methosd:{
lazyLoad(index){
  let bottom = index + 1 // 滑动到底部的数量
  if(bottom === this.assetsList.length &&bottom < this.assetsListTotal) {
    // 性能问题 第一次请求返回10条数据 可以有滚动的可能,不至于连续触发滚动事件 后续每次滚动 返回数据+5
    this.formlist.pageSize = this.formlist.pageSize + 5
        this.getListDetail()
  }
},
    getListDetail(){
      let params = {
        pageSize: this.formlist.pageSize
        // 其他参数
      }
      getListInfoDetail(params).then(res=>{
        if(res.status === '200'){
          if(res.data && res.data.list&&res.data.list.length >0){
            // 定义下数量的总数
            this.assetsListTotal  = res.data.total
            res.data.list.forEach(item=> {
              // 可以对item 的值进行处理
            });
            this.assetsList = res.data.list
          }
        }else {
          this.formlist.pageNum = 1
          this.formlist.pageSize = 10
        }
      }).catch((err)=>{this.$MesssgeError(err)})
      },lazyLoad(index){
  let bottom = index + 1 // 滑动到底部的数量
  if(bottom === this.assetsList.length &&bottom < this.assetsListTotal) {
    // 性能问题 第一次请求返回10条数据 可以有滚动的可能,不至于连续触发滚动事件 后续每次滚动 返回数据+5
    this.formlist.pageSize = this.formlist.pageSize + 5
        this.getListDetail()
  }
},
getListDetail(){
  let params = {
    pageSize: this.formlist.pageSize
     // 其他参数
    }
  getListInfoDetail(params).then(res=>{
    if(res.status === '200'){
      if(res.data && res.data.list&&res.data.list.length >0){
        // 定义下数量的总数
        this.assetsListTotal  = res.data.total
        res.data.list.forEach(item=> {
          // 可以对item 的值进行处理
        });
        this.assetsList = res.data.list
       }
    } else {
      this.formlist.pageNum = 1
      this.formlist.pageSize = 10
    }
  }).catch((err)=>{this.$MesssgeError(err)})
},
}

这样就可以实现了,根据接口返回的数据的数量来判断加载的次数