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' // 引入connectimport { 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;