下拉加载

原理： 在下拉过程中，通过监听滚动条距离底部的高度，来触发加载新的数据。 这里有一个APICloud自带的滚动属性 scrolltobottom 来帮助我们完成这个功能。

• 监听滚动到frame底部的事件

  api.addEventListener({
    name: 'scrolltobottom',
    extra: { // 距离底部还有多少触发scrolltobottom事件
        threshold: 0
    }
  }, function(ret, err) {
    // 获取更多的数据
    if (curCount < pageSize) {
        var pushStatus = $api.byId('pushStatus');
        pushStatus.innerHTML = "没有啦！";
    }else{
        getClassifyList();
    }
  });
  

• 加载数据

var pageNum = 0;
function getClassifyList(){
    pageNum ++;

    api.showProgress({
       style: 'default', animationType: 'fade', title: '努力加载中...', text: '', modal: false
    });

    // var params = params || {}
    var data = {
        "version": "1.0",
        "pageSize": params.pageSize || pageSize,
        "pageNum": pageNum,
        "data": params.data || {
        "demandType": '',
        "demandCategory": '',
        "auditStatus":  '',
        "sort":  10
    }

    api.ajax({
        url: 'http://172.16.50.57:8080/api/wxdemand/getClassifyList',
        method: 'post',
        data: { body: data },
        dataType: 'json',
        timeout: 100,
        returnAll: true,
        headers:{ 'Content-Type': 'application/json;charset=utf-8' }
    }, function(ret, err) {
        if (ret) {
            if (ret.statusCode == '200') {
              var result = ret.body.data;
              curCount = result.classifyList.length;
              updataList(result);              
            }else{
              alert('糟糕，错误状态码：'+ret.statusCode)
            }
        } else {
            alert('出错啦：'+err.statusCode);
        }
        api.hideProgress();
    });     
}

• 更新

  function updataList(data){
    var matchList = $api.byId('matchList')
    var tpl = template(data);
    $api.append(matchList, tpl);
  }
  

• 生成模板

  function template(data){
    var template = '';
    var list = data.classifyList;
    if (list.length >0) {
      for (var i = 0; i < list.length; i++) {
        var cate = '';
        switch(list[i].demand_category){
          case 0:
            cate = '精准营销'
            break;
          case 1:
            cate = '数据报告'
            break;
          case 2:
            cate = '数据交易'
            break;
          case 3:
            cate = 'API'
            break;
          case 4:
            cate = '其他定制'
            break;
        }
        var typeName = '' ,typeClass = '';
        switch(list[i].demand_type){
          case 0:
            typeName = '需'
            typeClass = 'receive'
            break;
          case 1:
            typeName = '接'
            typeClass = 'need'
            break;
        }
        template += '<div class="commonItems" onclick="openReleaseDetailsWin('+ list[i].id +')">';
        template += '<div class="title">'+ list[i].id +'</div>';
        template += '<div class="type type-'+ typeClass +'">'+ typeName +'</div>';
        template += '<div class="bd"><span class="cate">'+cate+'</span><span class="price">￥<b>'+ list[i].current_price +'</b></span><span class="sale">原价￥'+ list[i].original_cost +'</span></div>'
        template += '<div class="meta"><span><i class="icon-view"></i>' + list[i].browse_count +'</span><span><i class="icon-like"></i>' +list[i].fav_count+ '</span><span>2017-09-04 19:22:57</span></div>';
        template += '</div>';
      }
    }
    return template;
  }