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>