如何用vue實(shí)現(xiàn)初始狀態(tài)顯示10條數(shù)據(jù)，隨后上拉加載

看下Muse-ui的Infinite Scroll組件，改動(dòng)下應(yīng)該可以實(shí)現(xiàn)你的需求

<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>

至于怎么項(xiàng)目引入Muse-ui,查一下就知道了，也很簡單
Muse-ui鏈接（http://www.muse-ui.org/#/infi...）