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

た入场券 2022-06-09 07:55 227阅读 0赞

刚开始做的时候没有采用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
          }
        });