需求背景：
我們在手機端加載數據時，一般需要請求歷史數據時，需要進行分頁，因為手機運行需要快，所以不做一下子加載太多條的數據
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>
注意竖慧，你的數據顯示內容區(qū)需要設置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()
}
})
}
