zoukankan      html  css  js  c++  java
  • 无限加载 vue用infinite-loading插件和阿波罗请求

    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>
    

      

  • 相关阅读:
    Word2010如何从指定页设置页码
    十大常见web漏洞及防范
    CSRF攻击与防御
    信息安全常见漏洞类型汇总
    回忆一次校招笔试的题目
    Python操作rabbitmq系列(三):多个接收端消费消息
    Python操作rabbitmq系列(二):多个接收端消费消息
    Python操作rabbitmq系列(一)
    Python操作Redis
    Python连接Redis
  • 原文地址:https://www.cnblogs.com/beiqi/p/9376050.html
Copyright © 2011-2022 走看看