需求背景:
我们在手机端加载数据时,一般需要请求历史数据时,需要进行分页,因为手机运行需要快,所以不做一下子加载太多条的数据
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()
}
})
}
网友评论