摘要：
1.npminstallvue无限加载--save2.npminstall--savevue apollographqlapollo客户端apollo链接apollo连接httpapollo缓存inmemorygraphql标记（https://akryum.github.io/vue-apollo/guide/installation
1.npm install vue-infinite-loading --save
2.npm install --save vue-apollo graphql apollo-client apollo-link apollo-link-http apollo-cache-inmemory graphql-tag
（https://akryum.github.io/vue-apollo/guide/installation.html）复制到main.js 记得把地址换一下。
3.npm i --save lodash
<template>
<div>
<p v-for="(item,index) in companyList" :key="index">
Line:
<span v-text="item.id"></span>
</p>
<infinite-loading @infinite="onInfinite" ref="infiniteLoading">
<span slot="no-more">没有更多数据了</span>
</infinite-loading> </div>
</template>
<script>
import _ from "lodash"
import InfiniteLoading from 'vue-infinite-loading'
import gql from 'graphql-tag'
export default {
data() {
return {
list:[],
storeLimit:20,
page: 0,
skipQuery: true,
hasMore: true,
companyList: []
};
},
apollo: {
companies:{
query: gql`query companies($skip:Int,$take:Int){
companies(skip:$skip,take:$take ){
pageInfo{
skip
take
totalPage
currPage
}
items{
id
}
}
}`,
variables: {
skip: 0,
take: this.storeLimit,
},
skip() {
return this.skipQuery
},
result({ data}) {
this.companyList = [].concat(_.get(data, 'companies.items', []))
},
}
},
computed:{
companiesList(){
return _.get(this.companies,'items')
}
},
methods: {
onInfinite($state) {
//onInfinite这个函数当圈圈出现的时候就会自动执行
//this.page==0 是为了this.skipQuery = false 初始化一下我们的阿波罗
if(this.page === 0) {
this.skipQuery = false
this.page = 1
$state.loaded()
} else {
this.loadMore($state)
}
},
loadMore($state) {
if(this.page<5){
this.$apollo.queries.companies.fetchMore({
variables: {
skip: this.page * this.storeLimit,
take: this.storeLimit
},
updateQuery: (previousResult, { fetchMoreResult }) => {
const pageInfo = _.get(fetchMoreResult, 'companies.pageInfo')
const items = _.get(fetchMoreResult, 'companies.items', [])
const hasMore = items.length && pageInfo.currPage < pageInfo.totalPage
this.companyList = this.companyList.concat(items)
if(hasMore) {
this.page += 1
$state.loaded()
} else {
$state.complete()
}
}
})
}else{
$state.complete()
}
}
},
components: {
InfiniteLoading
}
}
</script>