antd mobile(九) iscroll5集成到项目中

刚开始做的时候没有采用iscroll，都做了快5个界面后才发现始终感觉界面差那么点意思，后来给用户演示时，发现界面跳转后回到当前界面又需要重新滚动到相应位置。用户说这个位置不能记住嘛？
一开始感觉这个简单啊，不就是记住当前滚动位置，然后通过js将滚动条滚动到指定位置，做的时候发现坑了，手机端浏览器根本不支持简单的设置

window.scrollTo(0,this.props.SinglePlanMd.AppMd["curScrollTop"]);

网上说用react-iscroll，抱着试试的心态就将react-iscroll引入了项目，根据实例就开始操作，发现根本没有效果而且把已有界面都给打乱了，调试了半天最后发现是react-iscroll跟react的切换动画布局有冲突，具体啥原因也就没深入研究了，所以这里告诫大家不要使用react-iscroll来实验了，直接引用iscroll来实现就是。
安装scroll

cnpm i --save-dev iscroll

本人是将iscroll直接封装成一个react组件，代码如下：

import React ,{Component,PropTypes} from 'react';
import { connect } from 'react-redux' // 引入connect
import { GoingUtils } from 'GoingUtils';
var iScroll = require('iscroll/build/iscroll-probe');


var scollerId=GoingUtils.getUUid(3);

class goingScroll extends Component {

  constructor(...props) {
    super(...props);
    this.endScroll=this.endScroll.bind(this);
  }

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


  componentDidMount() { 
    let scrollTop=this.props.scrollTop;
    var myScroll = new iScroll('#'+scollerId, {
      mouseWheel: true,
      scrollbars: true,
      click:true
    });
    let that=this;
    //滚动结束时 进行滚动位置的记录
    myScroll.on('scrollEnd',function(){
      that.endScroll(this.y);
    });
    //如果传入的y轴坐标不为0 则需要进行滚动操作
    if(scrollTop!=0){
      myScroll.scrollBy(0,0-parseFloat(scrollTop)); 
    } 
  }

  render() {
    return (
      <div id={scollerId} style={{marginTop:'.9rem',backgroundColor:'#EFF0F4',height:parseInt(window.innerHeight)-100}}>
        <div id={scollerId+"_scoller"}>
          {this.props.children}
        </div>
      </div>
    )
  }

}

export default goingScroll;

界面调用代码如下：

  render() {
    let scrollTop = this.props.SinglePlanMd.AppMd["scroll"]["singlePlan"]||0; 
    let {pageNavTitle,summaryObj,dayView,weekView,monthView,curDate}=this.props.SinglePlanMd.SinglePlanMd;
    let goToTaskList = this.goToTaskList;
    return (
      <div>
        <TopNavBar {...{title: pageNavTitle, addBtn: false, leftIcon: false, leftClick: this.navLeftClick}}/>
        <GoingScroll {...{dispatch:this.props.dispatch,pageName:'singlePlan',scrollTop: scrollTop}}>

          <div className="pageTitle">
            <label>数据截止时间：{curDate}</label>
          </div>

          <SummaryInfo {...{summaryObj, goToTaskList}}/>

          <DayView {...{dayView, goToTaskList}}/>

          <WeekView {...{weekView, goToTaskList}}/>

          <MonthView {...{monthView, goToTaskList}}/>

        </GoingScroll>
      </div>
    );

//scrollTop表示滚动条当前需要滚动的位置
//pageName界面名称，不同界面滚动定位不一样 
{dispatch:this.props.dispatch,pageName:'singlePlan',scrollTop: scrollTop}}

记住位置后，在跳转到其他界面时将当前位置记住，跳转回来时再读取当前位置，传递给滚动控件

//界面跳转时，如果目的界面的滚动位置为0 则需要传人相应的值，如果不传入指定的值，会读取缓存中滚动位置
   dispatch({
      type: 'AppMd/setCurAnimate',
      curAnimate: 'left',
      scroll:{
        taskList:0
      }
    });