为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

明月笑刀无情 2019-02-15 19:14:28
最近在用mint-ui后台的数据好多,想就加载10条然后上拉再再加载10条这样个样子用的是resource大佬们有没有demo,或者教教我!!
查看完整描述

2 回答

?
互换的青春

TA贡献1797条经验 获得超6个赞

参考 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
代码

查看完整回答
反对 回复 2019-02-18
?
倚天杖

TA贡献1828条经验 获得超3个赞

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


查看完整回答
反对 回复 2019-02-18
  • 2 回答
  • 0 关注
  • 2260 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信