ant-design-vue/components/list/demo/loadmore.md

87 lines
2.0 KiB
Markdown
Raw Normal View History

2018-06-16 13:30:41 +00:00
<cn>
#### 加载更多
可通过 `loadMore` 属性实现加载更多功能。
</cn>
<us>
#### Load more
Load more list with `loadMore` property.
</us>
```html
<template>
<a-list
class="demo-loadmore-list"
:loading="loading"
itemLayout="horizontal"
:dataSource="data"
>
<div v-if="showLoadingMore" slot="loadMore" :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
<a-spin v-if="loadingMore" />
<a-button v-else @click="onLoadMore">loading more</a-button>
</div>
<a-list-item slot="renderItem" slot-scope="item, index">
<a slot="actions">edit</a>
<a slot="actions">more</a>
<a-list-item-meta
description="Ant Design, a design language for background applications, is refined by Ant UED Team"
>
2019-02-16 08:51:21 +00:00
<a slot="title" href="https://vue.ant.design/">{{item.name.last}}</a>
2018-06-16 13:30:41 +00:00
<a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
</a-list-item-meta>
<div>content</div>
</a-list-item>
</a-list>
</template>
<script>
import reqwest from 'reqwest'
const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo'
export default {
data () {
return {
loading: true,
loadingMore: false,
showLoadingMore: true,
data: [],
}
},
mounted () {
this.getData((res) => {
this.loading = false
this.data = res.results
})
},
methods: {
getData (callback) {
reqwest({
url: fakeDataUrl,
type: 'json',
method: 'get',
contentType: 'application/json',
success: (res) => {
callback(res)
},
})
},
onLoadMore () {
this.loadingMore = true
this.getData((res) => {
this.data = this.data.concat(res.results)
this.loadingMore = false
this.$nextTick(() => {
window.dispatchEvent(new Event('resize'))
})
})
},
},
}
</script>
<style>
.demo-loadmore-list {
min-height: 350px;
}
</style>
```