滚动加载的简单实现方式

以下在vue项目中不用插件的情况下的下拉滚动加载案例

模板部分：

    <div class="listArea">
      <div class="scrollList">
        <div class="item" v-for="item in list" :key="item.id">
          <div class="circle"></div>
          <div class="info">{{item.info}}</div>
        </div>
      </div>
    </div>

js部分：

data() {
    return{
      list: [],
      api: {
        list: '/接口地址'
      },
      pageSize: 20,
      pageNo: 1
    }
  },
  mounted() {
    this.getData()
    let el = document.querySelector('.listArea')
    let that = this
    el.addEventListener('scroll', function (e) {
      let scrollTop = e.target.scrollTop;
      // 可视区高度
      let clientHeight = e.target.clientHeight;
      // 滚动条总高度
      let scrollHeight = e.target.scrollHeight;
      console.log(scrollHeight - 1, scrollTop + clientHeight);
      if (Math.ceil(scrollTop + clientHeight) >= (scrollHeight - 1) && that.total >= (that.pageSize * that.pageNo)) {
        that.pageNo++
        that.getData()
      }
    }) //监听页面滚动
  },
  destroyed() {
    let el = document.querySelector('.listArea')
    el.removeEventListener("scroll", this.windowScroll);//销毁滚动事件
  },
  methods: {
    getData() {
      //参数
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        order: 'desc',
        column: 'createTime'
      }
      //接口请求将数据展示到页面上
      getAction(this.api.list, params).then(res => {
        this.total = res.result.total
        res.result.records.forEach(item => {
          let newItem = {
            info: item.createTime + ' - ' + item.info,
            id: item.id
          }
          this.list.push(newItem)
        })
      })
    }
  },

布局方面，主要是把listArea的overflow设置成auto就行。