滚动下拉数据分页 infinite-scroll

<template>
  <div >
    <ul class="log_list"  ref="viewBox" style="height: 100%;overflow:scroll">
      <li class="item_cont" v-for="item in pullList" :key="item.index">
        <span class="time">{{item.loginTime}}</span><span class="ip">{{item.loginIp}}</span><span class="place">{{item.loginLocation}}</span>
      </li>
    </ul>
    <div class="loading" ref="loading">加载中</div>
  </div>
</template>

<script>
import AccountService from '../../../common/service/AccountService'
export default {
  name: 'pull',
  data () {
    return {
      pullList: [],
      currentPage: 1,
      slideFlag: true
    }
  },
  mounted () {
    this.findLogList()
    this.box = this.$refs.viewBox
    const scrollTop = document.documentElement.scrollTop
    const height = document.body.clientHeight
    // 监听这个dom的scroll事件
    this.box.addEventListener('scroll', () => {
      if (this.slideFlag && scrollTop + height >= this.$refs.loading.offsetTop && this.currentPage < this.totalNum) {
        this.slideFlag = false
        this.findLogList()
      }
    }, false)
  },
  methods: {
    findLogList () {
      let pageNo = this.currentPage
      let pageSize = this.pageSize
      AccountService.findLoginLog(pageNo, pageSize).then((data) => {
        console.log('页面内输出data====', data)
        this.totalNum = Number(data.data.countNum) || 0
        if (this.totalNum === 0) {
          this.showTotal = false
          return false
        }
        this.pullList = data.data.items || []
        this.slideFlag = true
        this.currentPage++
      }).catch((err) => {
        this.$message({
          message: err.message || '接口异常',
          type: 'error',
          center: true,
          customClass: 'common_tip'
        })
      })
    }

  },
  computed: {
  },
  components: {
  }
}
</script>
<style lang="stylus">
  .common_tip
    background rgba(15,15,15,0.80)!important
    border-radius 4px!important
    min-width 0!important
    // width 136px
    height 32px!important
    .el-message__content
      font-size 12px!important
      color #FFFFFF!important
    .el-message__icon
      display none!important
</style>

<style lang="stylus">
  .el-pager
    li
      &.active
        color #ca0c16!important
      &:hover
        color #ca0c16!important
  .el-pagination
    button
      &:hover
        color #ca0c16!important
</style>
<style scoped lang="less">
</style>

使用https://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll
infinite-scroll下拉数据请求