美文网首页
vue数据加载分页功能

vue数据加载分页功能

作者: 努力study代码的小哪吒 | 来源:发表于2021-03-01 14:42 被阅读0次

    需求背景:

    我们在手机端加载数据时,一般需要请求历史数据时,需要进行分页,因为手机运行需要快,所以不做一下子加载太多条的数据

    vue-infinite-loading

    这里我们用的是vue-infinite-loading这个插件来实现

    安装

    npm install vue-infinite-loading --save 或者
    yarn add vue-infinite-loading

    引入
    <template>
      <infinite-loading
         :identifier="infiniteId"
          @infinite="infiniteHandler"
          ref="infiniteLoading"
       >
         <span slot="no-more">
           <!-- 没有更多数据了... -->
         </span>
         <div slot="no-results" class="no-result">
            <img src="@img/img/app/nomore_icon.png" alt="" />
              <p>暂无可兑换礼品</p>
         </div>
      </infinite-loading>
    </template>
    
    <script>
        import InfiniteLoading from 'vue-infinite-loading'
        components: {
          InfiniteLoading
        }
    </script>
    

    注意,你的数据显示内容区需要设置CSS

    .main{
        position: absolute;
        top 116px
        bottom 0
        width 100%
        overflow auto
    }
    /**设置你无数据时显示图片的样式**/
    /deep/ .no-result, .no_more{
      display inline-blocke
      padding 20px 0
      img{
        width 300px
        height  300px
      }
    }
    
    使用
    // 获取你的接口数据
    infiniteHandler ($state) {
          this.showLoading = true
          this.$api.myPrizes({ exchangeStatus: this.currentTab,  pageIndex: this.pageIndex, pageSize: this.pageSize }).then(res => {
              this.showLoading = false
              if (res.code === 200) {
                if (res.result && res.result.records && res.result.records.length) {
                  this.prizes = this.prizes.concat(res.result.records)
                  this.pageIndex++
                  if (res.result.records < this.pageSize) {
                    $state.loaded()
                    $state.complete()
                  } else {
                    console.log('pageinde', this.pageIndex)
                    $state.loaded()
                  }
                } else {
                  $state.complete()
                }
              } else {
                this.$refs.Errormes.ErrormesFun(res.message)
                $state.complete()
              }
            })
        }
    

    相关文章

      网友评论

          本文标题:vue数据加载分页功能

          本文链接:https://www.haomeiwen.com/subject/holafltx.html