antd mobile(十一) MeScroll集成到项目中

蔚落 2022-06-09 14:10 239阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 antd mobile(七) 固定NavBar

只能说antd mobile真的是为淘宝内部写的框架，竟然连固定NavBar显示的接口都没暴露出来。也就是NavBar不跟着屏幕滚动而滚动。说实话如果是用reactNati

妖狐艹你老母/ 2022年06月10日 11:38/ 0 赞/ 271 阅读

相关 antd mobile(四) highcharts集成---采用react-highcharts

采用react-highcharts来集成highcharts，效果图： ![这里写图片描述][SouthEast] 第一步：安装react-highcharts

￡神魔★判官ぃ/ 2022年06月10日 07:52/ 0 赞/ 277 阅读

相关 antd mobile (三) 集成highcharts--传统方式

highcharts是一套比较出名的图表组件，做了个集成展示测试下效果跟速度，效果图： ![这里写图片描述][SouthEast] 第一步是安装highcharts组件

分手后的思念是犯贱/ 2022年06月10日 07:51/ 0 赞/ 294 阅读

相关 antd mobile(一) 环境搭建

以前需要一个组件，大概就3步，下载、引入、测试。现在用个组件可能就是n步了，一个下午都没把antd mobile的组件展示出来，各种坑啊，看着官方文档一步一步也还是满地坑

r囧r小猫/ 2022年06月10日 06:20/ 0 赞/ 318 阅读

相关 antd mobile(十一) MeScroll集成到项目中

MeScroll是在一个论坛看到的，论坛说比iscroll5 强大多了，本人对iscroll5早就不爽了，所以豪不犹豫的决定换掉它。经过一天的奋斗，发现MeScroll确

蔚落/ 2022年06月09日 14:10/ 0 赞/ 240 阅读

相关 antd mobile(十) 性能优化PureRender的使用

不得不吐槽react，确实不是新手玩的东西，一句话就是水深坑多啊。如果是前台新手我还是不建议直接使用这种框架开发。搜索react的性能优化，都提到了用pureRender来

╰半橙微兮°/ 2022年06月09日 09:57/ 0 赞/ 238 阅读

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

刚开始做的时候没有采用iscroll，都做了快5个界面后才发现始终感觉界面差那么点意思，后来给用户演示时，发现界面跳转后回到当前界面又需要重新滚动到相应位置。用户说这个位置不能

た入场券/ 2022年06月09日 07:55/ 0 赞/ 221 阅读

相关 antd mobile(十二) dva中使用mockJs

一开始做没有用mockJs来模拟数据查询，都是写在state里面，但后来发现还是存在偏差，所以还是把mockJs集成到系统中。现在为界面写个模拟数据请求的mockJs文件

朴灿烈づ我的快乐病毒、/ 2022年06月08日 06:06/ 0 赞/ 305 阅读

相关 react项目的组件库antd-mobile

1.antd-mobile是由蚂蚁金融团队推出的一个开源的react组件库，这个组件库拥有很多使用的组件，下面我来介绍一下他的用法： 2.按照官网http://beta.mo

ゝ一世哀愁。/ 2022年06月07日 20:42/ 0 赞/ 300 阅读

相关 react使用antd mobile

Ant-design框架 1. create-react-app antd 2. npm install antd-mobile --

向右看齐/ 2021年07月25日 13:29/ 0 赞/ 482 阅读