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