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>
    

      

  • 相关阅读:
    vue-webpack介绍
    vue-ES6模块化的导入和导出
    vue-前端模块化
    vue-插槽作用域的使用
    vue-具名插槽的使用
    vue-插槽的基本使用
    vue-父组件获取子组件对象实例
    IO(六)
    IO(五)
    关于overflow:hidden
  • 原文地址:https://www.cnblogs.com/beiqi/p/9376050.html
Copyright © 2011-2022 走看看