vue-infinite-loading的下拉加载更多等多个场景

使用该插件的原因是LJ的Mint-ui 里边的下拉加载在Ios兼容上有点问题，只好重新找个现成的。在快接近想自己写个之际，找到了个好帮手。当然途中遇到点小问题，后面解决了。

主要是用了它的几个功能点

• 下拉加载
• 点击触发加载
• 修改加载样式
• $state的传递（这个就是之前遇到的小问题）
  这是它的官方文档 (还好自己是过了六级的~还能凑合着看)
  里面有几个场景的案例，也包括上拉刷新下拉加载。

效果图

上拉加载.gif

• 场景1 下拉加载更多

 <!--视图层-->
  <infinite-loading spinner="bubbles" @infinite="infiniteHandler">
          <span slot="no-more">
               这里是内容
          </span>
  </infinite-loading>

 //加载更多
 infiniteHandler($state){
      if(this.selected == 'moments'){
    this._loadMoreDynamic($state,this.momentsList,this.$profileApi.Dynamic_GetRealTimeDynamicList,++this.Page.pageIndex)
      }else{
`` this._loadMoreDynamic($state,this.myMomentList,this.$profileApi.Dynamic_GetDynamicList,++this.Page.pageIndex1)
 },

 //加载更多动态
 _loadMoreDynamic($state,list,url,pageIndex){
      this.$http.post(url,
        {
          LookUserId:this.LookUserId,
          PageIndex:pageIndex,
          PageSize:this.Page.pageSize

        }).then((data)=>{
        if(data.Rstatus){
          list = list.concat(data.Rdata.List);
          if(this.selected == 'moments'){
            this.momentsList = Object.assign([], list);
          }else{
            this.myMomentList = Object.assign([], list);
          }
          //加载数据
          $state.loaded();
          //数据是否已经全部加载完(没有更多数据)
          if(pageIndex >= data.Rdata.PageCount) $state.complete()
        } else{
          $state.complete();
        }
      }).catch((err)=>{

      });
    },

主要实现还是在infiniteHandler($state)这个方法里，参数$state必须带，是该插件的核心。$state.complete()、$state.loaded()主要是这两个方法，一个是结束、一个是继续加载。

• 场景2 点击加载更多

<div class='text-fz22 loadmore-text' @click="loadMoreTrigger(item)" v-if="(Page.totalCount > Page.pageSize) && (item.DynamicCommentList.List.length != Page.totalCount)">{{lang.see_more}}</div>
<infinite-loading  spinner="bubbles" v-if="item.isLoad" @infinite="infiniteHandler($event,item)" ref="infiniteLoading">
</infinite-loading>
<!-- 是否加载完毕 -->
<span class='text-fz22 loadmore-text' v-if='item.isMore'>
 {{lang.noComment}}
</span>

js块

 //加载更多评论触发器
loadMoreTrigger(item){
     item.isLoad = true;
     this.$emit('loadMore');
},

 //加载更多评论
infiniteHandler($state,item){
        //获取实时动态
        this.$http.post(this.$profileApi.Dynamic_GetComment,
          {
            DynamicId:item.Id,
            PageIndex:++this.Page.pageIndex,
            PageSize:this.Page.pageSize

          }).then((data)=>{
          if(data.Rstatus){
            item.DynamicCommentList.List = item.DynamicCommentList.List.concat(data.Rdata.List)
            //加载数据
            $state.loaded();
            //数据是否已经全部加载完(没有更多数据)
            if(this.Page.pageIndex == data.Rdata.PageCount) {
                $state.complete()
                item.isLoad = false;
                item.isMore = true;
            }
          } else{
            $state.complete();
          }
        })
},

先到这里啦。路过得小伙伴给个赞哦~
有什么写的不对得地方可以帮忙指出哦。