antd mobile(十一) MeScroll集成到项目中

MeScroll是在一个论坛看到的，论坛说比iscroll5 强大多了，本人对iscroll5早就不爽了，所以豪不犹豫的决定换掉它。
经过一天的奋斗，发现MeScroll确实比iscroll5要强大些，也好理解些，所以如果还在犹豫从这俩者之间选择谁，那我就推荐MeScroll了。

虽然推荐MeScroll 但并不代表MeScroll就没有坑，还是那句话遍地都是坑。因为MeScroll是基于以前的ajax模式开发的，跟react结合起来还是怪怪的。而且MeScroll可能使用人比iiscroll5的少，所以有些细节接口做的并没有iscroll5细，再就是MeScroll封装了好多其他相关功能进来，虽然感觉毕iscroll5强大，但在react模式下，许多地方需要代码去干预。

说了这么多MeScroll的不好，那为啥还要用MeScroll呢？理由非常简单就是够流畅够稳定。
这是我该控件的封装代码：

import React ,{Component,PropTypes} from 'react';
import { connect } from 'react-redux' // 引入connect
import { GoingUtils,AssertUtils } from 'GoingUtils';
var MeScroll = require('mescroll.js/mescroll');
import 'mescroll.js/mescroll.min.css';
import './style/index.less';
import { Icon } from 'antd-mobile';


var scollerId = GoingUtils.getUUid(3);let mescroll=null;

function upCallback(page,mescroll,appendContent,recordSize=0) {
  console.log("-----------------"+recordSize)
  console.log(page);
  mescroll.endSuccess();
  if(page["num"]!=1){
    setTimeout(function(){
      appendContent(mescroll,page);
    },200)
  }
}


function initEmptyDiv(downFlush, recordSize) {
  if (downFlush){
      var el=document.querySelector(".mescroll-empty");
      if(el!=null&&recordSize>0){
        el.style.display="none";
      }else if(el!=null){
        el.style.display="block";
          }
      }
}
function initScroll({scollerId,scrollTop,downFlush,endScroll,appendContent,recordSize=0,getTotalSize,getRecordSize,itemHeight=100}){

  initEmptyDiv(downFlush, recordSize);

   mescroll = new MeScroll(scollerId, { //第一个参数"mescroll"对应上面布局结构div的id
    //如果您的下拉刷新是重置列表数据,那么down完全可以不用配置,具体用法参考第一个基础案例
    //解析: down.callback默认调用mescroll.resetUpScroll(),而resetUpScroll会将page.num=1,再触发up.callback
    down:{
      use:false,
    },
    up: {
      use:true,
      auto:downFlush?true:false,
      offset:itemHeight,
      onScroll:function(mescroll, y){
        endScroll(y);
      },
      callback: function(page){
        //上拉加载的回调
        let totalSize=getTotalSize();let recordLength=getRecordSize();
        console.log(recordLength+"--recordLength---------------totalSize-----"+totalSize);
        if(downFlush&&parseInt(recordLength)<parseInt(totalSize)){
          upCallback(page,mescroll,appendContent,recordLength);
        }else{
          if(page['num']==1){
            if(!downFlush){
              mescroll.endSuccess(0);
            }else{
              mescroll.endSuccess(20);
            }
          }else{
            mescroll.endSuccess(recordLength);
          }
        }
      }
    },
  });



  //如果传入的y轴坐标不为0 则需要进行滚动操作
  if (scrollTop!=null&&scrollTop != 0) {
    mescroll.scrollTo(0 - parseFloat(scrollTop));
  }
}
class goingScroll extends Component {
  constructor(...props) {
    super(...props);
    this.endScroll = this.endScroll.bind(this);
    this.appendContent = this.appendContent.bind(this);
    this.getTotalSize = this.getTotalSize.bind(this);
    this.getRecordSize=this.getRecordSize.bind(this);
  }

  //结束回滚时 则调用顶层的reducer来设置当前界面的滚动位置
  endScroll(y) {
    if (this.props.dispatch != null) {
      //界面名称
      var pageName = this.props.pageName;
      var disObj = {
        type: 'AppMd/setPageScroll',
        scroll: {}
      };
      disObj.scroll[pageName] = -y;
      //触发顶层的滚动reducer
      this.props.dispatch(disObj);
    }
  }

  //组件更新后 需要根据记录数以及记录总数来初始化下信息提醒div
  shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps)
    let recordLength=this.getRecordSize(nextProps);
    let totalSize=this.getTotalSize(nextProps);
    initEmptyDiv(nextProps["downFlush"], recordLength);
    if(nextProps["downFlush"]&&recordLength==0&&mescroll!=null){
      mescroll.endSuccess(0);
    }
    console.log(recordLength+"--recordLength---------shouldComponentUpdate------totalSize-----"+totalSize);
    return true;
  }

  //下拉刷新时 加载该方法来实现数据的追加
  appendContent(myScroll,page) {
    var backFun = function (recordSize) {
      console.log("--------------------"+recordSize)
      myScroll.endSuccess();
    }
    if(AssertUtils.isFunction(this.props.flushContent)){
      this.props.flushContent(page["num"]);
    }

  }

  //获取当前组件传入的记录数
  getRecordSize(nextProps){
    if(nextProps==null){
      return this.props.recordSize;
    }else{
      return nextProps.recordSize;
    }
  }

  //获取当前组件传入的记录总数
  getTotalSize(nextProps){
    if(nextProps==null){
      return this.props.totalSize;
    }else{
      return nextProps.totalSize;
    }
  }

  //组件加载完成后 对MeScroll组件进行初始化。
  componentDidMount() {
    let endScrollFun=this.endScroll;
    let appendContent=this.appendContent;
    let options={...this.props,scollerId:scollerId,appendContent:appendContent,endScroll:endScrollFun,getTotalSize:this.getTotalSize,getRecordSize:this.getRecordSize};
    console.log(options)
    initScroll(options);
  }

  render() {
    let {topHeight}=this.props;
    if(topHeight==null){
      topHeight=90;
    }
    return (
      <div  className="wrapperScroll"
           style={{top:topHeight+'px',backgroundColor:'#EFF0F4',height:parseInt(window.innerHeight)-(topHeight+3)+'px'}}>
        <div id={scollerId} className="mescroll" style={{height:parseInt(window.innerHeight)-(topHeight)+'px'}}>
          {this.props.children}
          {this.props.downFlush ? <div className="mescroll-empty" style={{display:'none'}}>
            <p className="empty-tip">暂无相关数据</p>
          </div> : ""}
        </div>
      </div>
    )
  }

}

export default goingScroll;