使用该插件的原因是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();
}
})
},
先到这里啦。路过得小伙伴给个赞哦~
有什么写的不对得地方可以帮忙指出哦。
