56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<template>
|
|
<Scroll :on-reach-edge="loadData">
|
|
<section v-for="item in list">
|
|
<div class="city">
|
|
<p>{{ item }}</p>
|
|
</div>
|
|
</section>
|
|
</Scroll>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data () {
|
|
return {
|
|
list: [1,2,3,4,5,6,7,8,9,10]
|
|
}
|
|
},
|
|
methods: {
|
|
loadData (dir) {
|
|
return new Promise(resolve => {
|
|
setTimeout(() => {
|
|
if (dir > 0) {
|
|
const first = this.list[0];
|
|
for (let i = 1; i < 11; i++) {
|
|
this.list.unshift(first - i);
|
|
}
|
|
} else {
|
|
const last = this.list[this.list.length - 1];
|
|
for (let i = 1; i < 11; i++) {
|
|
this.list.push(last + i);
|
|
}
|
|
}
|
|
resolve();
|
|
}, 500);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
section {
|
|
margin: 20px;
|
|
}
|
|
section > div {
|
|
width: 300px;
|
|
padding: 15px;
|
|
margin: 5px;
|
|
background-color: #ddf;
|
|
border: 1px solid #446;
|
|
border-radius: 5px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ivu-scroll-container {
|
|
height: 500px;
|
|
}
|
|
</style>
|