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 } });