Apicloud 实现上拉刷新 下拉加载更多

apicloud如何实现优雅的下拉刷新与加载更多

在我们的项目中，有的类型的数据是有很多的，比如我们不同种类的商品等等有很多，或者我们的消费记录等等有很多。反正不管是什么数据，如果过多的话，然而我们的手机屏幕大小又是有限的，所以这个时候一页就是现实不完的，所以我们需要上拉的时候在加载数据。还有就是我们加载出来了数据，然后很久我们都保持在这个页面，都没有变动，所以这个时候我们也是需要下拉一下来刷新这些数据。

先上效果图

1264306-20190925171702811-981213350.gif

上代码

js

  var vm = new Vue({
    el: '#vue',
    data: function() {
      return {
        list:[],
        limit:10,//每页条数
        page:0, //页码
        total:0, //数据总条数
        more:0, //是否还有下一页
        loading:true //加载动画
      }
    },
    methods:{
      init: function() {
        //api初始化
        vm.getData()
        vm.fnInitEvent();
      },
      getData: function() { //获取页面数据
        ajax.get('接口地址?page='+vm.page+'&limit='+vm.limit, function(json) {
          vm.more = json.more || 0
          vm.loading = false
          if(json.list.length){  ////把请求到的数据遍历添加进页面数据的数组
            for (var i = 0,len = json.list.length; i < len ; i++) {
              vm.list.push(json.list[i]);
            };
          }
        });
      },
      fnInitEvent:function() {
        /**上拉加载 */
        api.addEventListener({
          name:'scrolltobottom',
          extra:{
            threshold:10
          }
        }, function(ret, err){
          if(vm.more){  //页码+1，继续请求数据
            vm.page+=1;
            vm.getData();
          }
        });
        api.setRefreshHeaderInfo({
          bgColor: 'rgba(255,255,255,0)',
          textColor: '#333',
          textDown: '下拉刷新...',
          textUp: '松开刷新...'
        }, function(ret, err) {
          vm.reSet()
        });
      },
      reSet:function(){ //上拉刷新重新加载数据
        vm.page = 1;
        vm.list = []
        vm.getData();
        vm.loading = true
        api.refreshHeaderLoadDone(); //取消下拉刷新效果
      }
    }
  })
  apiready  = function() {
    //进行apiready处理，在apiready里 我进行了第一次页面数据请求和初始化事件监听       
    vm.init()
  }

html就是正常写就行 获取到数据直接渲染到页面即可 这里就不展示了

有什么疑问或者错误可随时指出.