如何用vue实现初始状态显示10条数据，随后上拉加载

Question

在页面初始化的时候请求接口，参数为pageindex1 加载数据，如果满10条，用户滚动到第十条数据的时候，请求pageindex2，如果不满10条则不继续请求，以此类推。
请问应该如何实现？

Answer 1

看下Muse-ui的Infinite Scroll组件，改动下应该可以实现你的需求

<template>
<div class="demo-infinite-container">
  <mu-list>
    <template v-for="item in list">
      <mu-list-item :title="item"/>
      <mu-divider/>
    </template>
  </mu-list>
  <mu-infinite-scroll :scroller="scroller" :loading="loading" @load="loadMore"/>
</div>
</template>

<script>
export default {
  data () {
    const list = []
    for (let i = 0; i < 10; i++) {
      list.push('item' + (i + 1))
    }
    return {
      list,
      num: 10,
      loading: false,
      scroller: null
    }
  },
  mounted () {
    this.scroller = this.$el
  },
  methods: {
    loadMore () {
      this.loading = true
      setTimeout(() => {
        for (let i = this.num; i < this.num + 10; i++) {
          this.list.push('item' + (i + 1))
        }
        this.num += 10
        this.loading = false
      }, 2000)
    }
  }
}
</script>

<style lang="css">
.demo-infinite-container{
  width: 256px;
  height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #d9d9d9;
}
</style>

至于怎么项目引入Muse-ui,查一下就知道了，也很简单
Muse-ui链接（http://www.muse-ui.org/#/infi...）