vue mint-ui加载上拉加载， 分页 求大佬解答

Question

最近在用mint-ui
后台的数据好多，想就加载10条
然后上拉再再加载10条这样个样子
用的是resource

大佬们有没有demo，或者教教我！！！

Answer 1

下拉事件里面把新加的10条数据push进v-for的数组

Answer 2

参考 demo 对应的代码，第二个链接，data 设置个 pageIndex:0 ,created 的时候获取第一页的数据，放进 list 里，loadBottom方法里pageIndex++，获取下一页

export default {
    data() {
      return {
        list: [],
        allLoaded: false,
        bottomStatus: '',
        wrapperHeight: 0,
        pageIndex: 1,
        pageSize:10
      };
    },
    methods: {
      handleBottomChange(status) {
        this.bottomStatus = status;
      },
      loadBottom() {
        this.pageIndex++
        getDataFromServer()
      },
      getDataFromServer(){
          var vm = this
          //后台获取某页数据，以下为成功回调函数里的代码，假设返回为{data:[],total:30}
          vm.list = vm.list.concat(res.data)
          if(vm.list.length===total){
              vm.allLoaded = true
          }
          vm.$refs.loadmore.onBottomLoaded();
      }
    },
    created() {
      getDataFromServer()
    },
    mounted() {
      this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
    }
  };

---

mint-ui不是有很多 demo 么。。。
demo
代码

Answer 3

把新获取到的10条数据push进之前数组或者拼接起来，再将数据渲染出来。