<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>
滚动列表流加载分页数据 import InfiniteLoading from 'vue-infinite-loading'
最新推荐文章于 2024-08-08 08:32:05 发布