滚动列表流加载分页数据 import InfiniteLoading from 'vue-infinite-loading'

<template>
  <!--<ul-->
    <!--v-infinite-scroll="findLogList"-->
    <!--infinite-scroll-disabled="loading"-->
    <!--infinite-scroll-distance="10">-->
    <!--<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="hacker-news-list">
    <div class="hacker-news-header">
      <a target="_blank" href="http://www.ycombinator.com/">
        <img src="https://news.ycombinator.com/y18.gif">
      </a>
      <span>Hacker News</span>
    </div>
    <ul class="hacker-news-item">
    <li class="item_cont" v-for="(item, key) in pullList" >
    <span class="time">{{item.loginTime}}</span><span class="ip">{{item.loginIp}}</span><span class="place">{{item.loginLocation}}</span>
      <span>{{key+1}}</span>
    </li>
    </ul>
    <infinite-loading @infinite="infiniteHandler">
    <span slot="no-more">
      There is no more Hacker News :(
    </span>
    </infinite-loading>
  </div>
</template>

<script>
import AccountService from '../../../common/service/AccountService'
import InfiniteLoading from 'vue-infinite-loading'
export default {
  name: 'pull',
  data () {
    return {
      pullList: [],
      currentPage: 1,
      list: [],
      loading: false
    }
  },
  mounted () {
    // this.findLogList()
  },
  methods: {
    infiniteHandler ($state) {
      this.findLogList($state)
    },
    findLogList ($state) {
      let pageNo = this.currentPage
      let pageSize = this.pageSize
      AccountService.findLoginLog(pageNo, pageSize).then((data) => {
        console.log('页面内输出data====', data)
        this.loading = true
        this.totalNum = Number(data.data.countNum) || 0
        if (this.totalNum === 0) {
          this.showTotal = false
          return false
        }
        this.currentPage++
        if (data.data.items.length) {
          this.pullList = this.pullList.concat(data.data.items)
          console.log('this.pullList===', this.pullList)
          $state.loaded()
          console.log('this.pullList.length', this.pullList.length)
          console.log('this.totalNum====', this.totalNum)
          if (this.pullList.length === this.totalNum) {
            console.log('进入this.pullList阻止')
            $state.complete()
          }
        } else {
          $state.complete()
        }
        // $state.loaded()
      }).catch((err) => {
        this.$message({
          message: err.message || '接口异常',
          type: 'error',
          center: true,
          customClass: 'common_tip'
        })
      })
    }

  },
  computed: {
  },
  components: {
    InfiniteLoading
  }
}
</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>