ysh/server/public/static/front/js/mescroll/mescroll.js

/* mescroll
 * version 1.4.2
 * 2019-08-01 wenju
 * http://www.mescroll.com
 */
(function (name, definition) {
  if (typeof define === 'function') {
    // AMD环境或CMD环境
    define(definition);
  } else if (typeof module !== 'undefined' && module.exports) {
    // 定义为普通Node模块
    module.exports = definition();
  } else {
    // 将模块的执行结果挂在window变量中，在浏览器中this指向window对象
    this[name] = definition();
  }
})('MeScroll', function () {
  var MeScroll = function (mescrollId, options) {
    var me = this;
    me.version = '1.4.2'; // mescroll版本号
    me.isScrollBody = (!mescrollId || mescrollId === 'body'); // 滑动区域是否为body
    me.scrollDom = me.isScrollBody ? document.body : me.getDomById(mescrollId); // MeScroll的滑动区域
    if (!me.scrollDom) return;

    me.options = options || {}; // 配置

    var u = navigator.userAgent;
    var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // 是否为ios设备
    var isPC = typeof window.orientation === 'undefined'; // 是否为PC端
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;// 是否为android端
    var isWx = u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger'; // 是否为微信端,此处不能为===,因为match的结果可能是null或数组
    
    me.os = {
      ios: isIOS,
      pc: isPC,
      android: isAndroid,
      wx: isWx
    }

    me.isDownScrolling = false; // 是否在执行下拉刷新的回调
    me.isUpScrolling = false; // 是否在执行上拉加载的回调
    var hasDownCallback = me.options.down && me.options.down.callback; // 是否配置了down的callback

    // 初始化下拉刷新
    me.initDownScroll();
    // 初始化上拉加载,则初始化
    me.initUpScroll();

    // 自动加载
    setTimeout(function () { // 待主线程执行完毕再执行,避免new MeScroll未初始化,在回调获取不到mescroll的实例
      // 自动触发下拉刷新 (只有配置了down的callback才自动触发下拉刷新)
      if (me.optDown.use && me.optDown.auto && hasDownCallback) {
        if (me.optDown.autoShowLoading) {
          me.triggerDownScroll(); // 显示下拉进度,执行下拉回调
        } else {
          me.optDown.callback && me.optDown.callback(me); // 不显示下拉进度,直接执行下拉回调
        }
      }
      // 自动触发上拉加载
      me.optUp.use && me.optUp.auto && !me.isUpAutoLoad && me.triggerUpScroll();
    }, 30); // 需让me.optDown.inited和me.optUp.inited先执行
  }

  /* 配置参数:下拉刷新 */
  MeScroll.prototype.extendDownScroll = function (optDown) {
    // 下拉刷新的配置
    MeScroll.extend(optDown, {
      use: true, // 是否启用下拉刷新; 默认true
      auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
      autoShowLoading: false, // 如果设置auto=true(在初始化完毕之后自动执行下拉刷新的回调),那么是否显示下拉刷新的进度; 默认false
      isLock: false, // 是否锁定下拉刷新,默认false;
      isBoth: false, // 下拉刷新时,如果滑动到列表底部是否可以同时触发上拉加载;默认false,两者不可同时触发;
      offset: 80, // 在列表顶部,下拉大于80px,松手即可触发下拉刷新的回调
      inOffsetRate: 1, // 在列表顶部,下拉的距离小于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
      outOffsetRate: 0.2, // 在列表顶部,下拉的距离大于offset时,改变下拉区域高度比例;值小于1且越接近0,高度变化越小,表现为越往下越难拉
      bottomOffset: 20, // 当手指touchmove位置在距离body底部20px范围内的时候结束上拉刷新,避免Webview嵌套导致touchend事件不执行
      minAngle: 45, // 向下滑动最少偏移的角度,取值区间  [0,90];默认45度,即向下滑动的角度大于45度则触发下拉;而小于45度,将不触发下拉,避免与左右滑动的轮播等组件冲突;
      hardwareClass: 'mescroll-hardware', // 硬件加速样式,解决部分手机闪屏或动画不流畅的问题
      mustToTop: false, // 是否滚动条必须在顶部,才可以下拉刷新.默认false. 当您发现下拉刷新会闪白屏时,设置true即可修复.
      warpId: null, // 可配置下拉刷新的布局添加到指定id的div;默认不配置,默认添加到mescrollId
      warpClass: 'mescroll-downwarp', // 下拉刷新的布局容器样式,参见mescroll.css
      resetClass: 'mescroll-downwarp-reset', // 下拉刷新高度重置的动画,参见mescroll.css
      textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
      textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
      textLoading: '加载中 ...', // 加载中的提示文本
      htmlContent: '<p class="downwarp-progress"></p><p class="downwarp-tip"></p>', // 布局内容
      inited: function (mescroll, downwarp) {
        // 下拉刷新初始化完毕的回调
        mescroll.downTipDom = downwarp.getElementsByClassName('downwarp-tip')[0];
        mescroll.downProgressDom = downwarp.getElementsByClassName('downwarp-progress')[0];
      },
      inOffset: function (mescroll) {
        // 下拉的距离进入offset范围内那一刻的回调
        if (mescroll.downTipDom) mescroll.downTipDom.innerHTML = mescroll.optDown.textInOffset;
        if (mescroll.downProgressDom) mescroll.downProgressDom.classList.remove('mescroll-rotate');
      },
      outOffset: function (mescroll) {
        // 下拉的距离大于offset那一刻的回调
        if (mescroll.downTipDom) mescroll.downTipDom.innerHTML = mescroll.optDown.textOutOffset;
      },
      onMoving: function (mescroll, rate, downHight) {
        // 下拉过程中的回调,滑动过程一直在执行; rate下拉区域当前高度与指定距离的比值(inOffset: rate<1; outOffset: rate>=1); downHight当前下拉区域的高度
        if (mescroll.downProgressDom) {
          var progress = 360 * rate;
          mescroll.downProgressDom.style.webkitTransform = 'rotate(' + progress + 'deg)';
          mescroll.downProgressDom.style.transform = 'rotate(' + progress + 'deg)';
        }
      },
      beforeLoading: function (mescroll, downwarp) {
        // 准备触发下拉刷新的回调
        return false; // 如果return true,将不触发showLoading和callback回调; 常用来完全自定义下拉刷新, 参考案例【淘宝 v6.8.0】
      },
      showLoading: function (mescroll) {
        // 显示下拉刷新进度的回调
        if (mescroll.downTipDom) mescroll.downTipDom.innerHTML = mescroll.optDown.textLoading;
        if (mescroll.downProgressDom) mescroll.downProgressDom.classList.add('mescroll-rotate');
      },
      afterLoading: function (mescroll) {
        // 准备结束下拉的回调. 返回结束下拉的延时执行时间,默认0ms; 常用于结束下拉之前再显示另外一小段动画,才去隐藏下拉刷新的场景, 参考案例【dotJump】
        return 0
      },
      callback: function (mescroll) {
        // 下拉刷新的回调;默认重置上拉加载列表为第一页
        mescroll.resetUpScroll();
      }
    })
  }

  /* 配置参数:上拉加载 */
  MeScroll.prototype.extendUpScroll = function (optUp) {
    // 是否为PC端,如果是scrollbar端,默认自定义滚动条
    var isPC = this.os.pc;
    // 上拉加载的配置
    MeScroll.extend(optUp, {
      use: true, // 是否启用上拉加载; 默认true
      auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
      isLock: false, // 是否锁定上拉加载,默认false;
      isBoth: false, // 上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发;
      isBounce: true, // 是否允许ios的bounce回弹;默认true,允许; 如果设置为false,则除了mescroll, mescroll-touch, mescroll-touch-x, mescroll-touch-y能够接收touchmove事件,其他部分均无法滑动,能够有效禁止bounce
      callback: null, // 上拉加载的回调;function(page,mescroll){ }
      page: {
        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
        size: 10, // 每页数据的数量
        time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;
      },
      noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
      offset: 100, // 列表滚动到距离底部小于100px,即可触发上拉加载的回调
      toTop: {
        // 回到顶部按钮,需配置src才显示
        warpId: null, // 父布局的id; 默认添加在body中
        src: null, // 图片路径,默认null;
        html: null, // html标签内容,默认null; 如果同时设置了src,则优先取src
        offset: 1000, // 列表滚动多少距离才显示回到顶部按钮,默认1000
        warpClass: 'mescroll-totop', // 按钮样式,参见mescroll.css
        showClass: 'mescroll-fade-in', // 显示样式,参见mescroll.css
        hideClass: 'mescroll-fade-out', // 隐藏样式,参见mescroll.css
        fadeDuration: 0.5, // 回到顶部按钮的显示隐藏动画时长,默认0.5秒. (注意:showClass和hideClass设置的动画时长不会生效.)
        duration: 300, // 回到顶部的动画时长,默认300ms
        supportTap: false, // 如果您的运行环境支持tap,则可配置true;
        btnClick: null // 点击按钮的回调; 小提示:如果在回调里return true,将不执行回到顶部的操作.
      },
      loadFull: {
        use: false, // 列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止;默认false,因为可通过调高page.size避免这个情况
        delay: 500 // 延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕;
      },
      empty: {
        // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效;
        warpId: null, // 父布局的id; 如果此项有值,将不使用clearEmptyId的值;
        customId: null, // 自定义空布局的id; 如果此项有值,将不使用empty所有配置;空布局的显示隐藏只控制customId元素的显示隐藏;用于完全自定义empty的场景
        icon: null, // 图标路径
        tip: '~ 空空如也 ~', // 提示
        btntext: '', // 按钮
        btnClick: null, // 点击按钮的回调
        supportTap: false // 如果您的运行环境支持tap,则可配置true;
      },
      clearId: null, // 加载第一页时需清空数据的列表id; 如果此项有值,将不使用clearEmptyId的值;
      clearEmptyId: null, // 相当于同时设置了clearId和empty.warpId; 简化写法;默认null; 注意vue中不能配置此项
      hardwareClass: 'mescroll-hardware', // 硬件加速样式,使上拉动画流畅
      warpId: null, // 可配置上拉加载的布局添加到指定id的div;默认不配置,默认添加到mescrollId
      warpClass: 'mescroll-upwarp', // 上拉加载的布局容器样式
      htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', // 上拉加载中的布局
      htmlNodata: '<p class="upwarp-nodata">-- END --</p>', // 无数据的布局
      inited: function (mescroll, upwarp) {
        // 初始化完毕的回调,可缓存dom 比如 mescroll.upProgressDom = upwarp.getElementsByClassName("upwarp-progress")[0];
      },
      showLoading: function (mescroll, upwarp) {
        // 上拉加载中.. mescroll.upProgressDom.style.display = "block" 不通过此方式显示,因为ios快速滑动到底部,进度条会无法及时渲染
        upwarp.innerHTML = mescroll.optUp.htmlLoading;
      },
      showNoMore: function (mescroll, upwarp) {
        // 无更多数据
        upwarp.innerHTML = mescroll.optUp.htmlNodata;
      },
      onScroll: null, // 列表滑动监听,默认null; 例如 onScroll: function(mescroll, y, isUp){ }; //y为列表当前滚动条的位置; isUp=true向上滑,isUp=false向下滑
      scrollbar: {
        use: isPC, // 默认只在PC端自定义滚动条样式
        barClass: 'mescroll-bar'
      },
      lazyLoad: {
        use: false, // 是否开启懒加载,默认false
        attr: 'imgurl', // 网络图片地址的属性名 (图片加载成功会自动移除改属性): <img imgurl='网络图  src='占位图''/>
        showClass: 'mescroll-lazy-in', // 显示样式,参见mescroll.css
        delay: 500, // 列表滚动的过程中每500ms检查一次图片是否在可视区域,如果在可视区域则加载图片
        offset: 200 // 超出可视区域200px的图片仍可触发懒加载,目的是提前加载部分图片
      }
    })
  }

  /* 配置参数 */
  MeScroll.extend = function (userOption, defaultOption) {
    if (!userOption) return defaultOption;
    for (var key in defaultOption) {
      if (userOption[key] == null) {
        userOption[key] = defaultOption[key];
      } else if (typeof userOption[key] === 'object') {
        MeScroll.extend(userOption[key], defaultOption[key]); // 深度匹配
      }
    }
    return userOption;
  }

  /* -------初始化下拉刷新------- */
  MeScroll.prototype.initDownScroll = function () {
    var me = this;

    // 配置参数
    me.optDown = me.options.down || {};

    // 具体参数配置
    me.extendDownScroll(me.optDown);

    // 鼠标或手指的按下事件
    me.touchstartEvent = function (e) {
      if (me.isScrollTo) me.preventDefault(e); // 如果列表执行滑动事件,则阻止事件,优先执行scrollTo方法

      me.startPoint = me.getPoint(e); // 记录起点
      me.lastPoint = me.startPoint; // 重置上次move的点

      me.maxTouchmoveY = me.getBodyHeight() - me.optDown.bottomOffset; // 手指触摸的最大范围(写在touchstart避免body获取高度为0的情况)
      me.inTouchend = false; // 标记不是touchend
      var scrollTop = me.getScrollTop();// 滚动条的位置
      me.isKeepTop = scrollTop === 0; // 标记滚动条起点为0
      if (me.os.pc && scrollTop <= 0) {
        // 在顶部给PC端添加move事件
        me.scrollDom.addEventListener('mousemove', me.touchmoveEvent, {
          passive: false
        });
        document.ondragstart = function () { // 在顶部禁止PC端拖拽图片,避免与下拉刷新冲突
          return false;
        }
      }
    }

    me.scrollDom.addEventListener('mousedown', me.touchstartEvent); // PC端鼠标事件
    me.scrollDom.addEventListener('touchstart', me.touchstartEvent); // 移动端手指事件

    // 鼠标或手指的滑动事件
    me.touchmoveEvent = function (e) {
      if (!me.startPoint) return;

      var scrollTop = me.getScrollTop(); // 当前滚动条的距离
      if (scrollTop > 0) me.isKeepTop = false; // 在移动过程中,只要滚动条有一次大于0,则标记false
      var curPoint = me.getPoint(e); // 当前点

      var moveY = curPoint.y - me.startPoint.y; // 和起点比,移动的距离,大于0向下拉,小于0向上拉

      // 向下拉
      if (moveY > 0) {
        // 在顶部
        if (scrollTop <= 0) {
          me.preventDefault(e); // 阻止浏览器默认的滚动,避免触发bounce

          // 可下拉的条件
          if (me.optDown.use && !me.inTouchend && !me.isDownScrolling && !me.optDown.isLock && (!me.isUpScrolling || (me.isUpScrolling && me.optUp.isBoth))) {
            if (me.optDown.mustToTop && !me.isKeepTop) return; // 是否配置了必须在顶部才可以下拉

            // 下拉的角度是否在配置的范围内
            var x = Math.abs(me.lastPoint.x - curPoint.x);
            var y = Math.abs(me.lastPoint.y - curPoint.y);
            var z = Math.sqrt(x * x + y * y);
            if (z !== 0) {
              var angle = Math.asin(y / z) / Math.PI * 180; // 两点之间的角度,区间 [0,90]
              if (angle < me.optDown.minAngle) return; // 如果小于配置的角度,则不往下执行下拉刷新
            }
						
            // 如果手指的位置超过配置的距离,则提前结束下拉,避免Webview嵌套导致touchend无法触发
            if (me.maxTouchmoveY > 0 && curPoint.y >= me.maxTouchmoveY) {
              me.inTouchend = true; // 标记执行touchend
              me.touchendEvent(); // 提前触发touchend
              return;
            }

            var diff = curPoint.y - me.lastPoint.y; // 和上次比,移动的距离 (大于0向下,小于0向上)
            if (!me.downHight) me.downHight = 0; // 下拉区域的高度
            // 下拉距离  < 指定距离
            if (me.downHight < me.optDown.offset) {
              if (me.movetype !== 1) {
                me.movetype = 1; // 加入标记,保证只执行一次
                me.optDown.inOffset(me); // 进入指定距离范围内那一刻的回调,只执行一次
                me.downwarp.classList.remove(me.optDown.resetClass); // 移除高度重置的动画
                me.isMoveDown = true; // 标记下拉区域高度改变,在touchend重置回来
                if (me.os.ios && !me.isKeepTop) { // 下拉过程中,滚动条一直在顶部的,则不必取消回弹,否则会闪白屏
                  me.scrollDom.classList.add(me.optDown.hardwareClass); // 开启硬件加速,解决iOS下拉因隐藏进度条而闪屏的问题
                  me.scrollDom.style.webkitOverflowScrolling = 'auto'; // 取消列表回弹效果,避免与下面me.downwarp.style.height混合,而导致界面抖动闪屏
                  me.isSetScrollAuto = true; // 标记设置了webkitOverflowScrolling为auto
                }
              }
              me.downHight += diff * me.optDown.inOffsetRate; // 越往下,高度变化越小

              // 指定距离  <= 下拉距离
            } else {
              if (me.movetype !== 2) {
                me.movetype = 2; // 加入标记,保证只执行一次
                me.optDown.outOffset(me); // 下拉超过指定距离那一刻的回调,只执行一次
                me.downwarp.classList.remove(me.optDown.resetClass); // 移除高度重置的动画
                me.isMoveDown = true; // 标记下拉区域高度改变,在touchend重置回来
                if (me.os.ios && !me.isKeepTop) { // 下拉过程中,滚动条一直在顶部的,则不必取消回弹,否则会闪白屏
                  me.scrollDom.classList.add(me.optDown.hardwareClass); // 开启硬件加速,解决iOS下拉因隐藏进度条而闪屏的问题
                  me.scrollDom.style.webkitOverflowScrolling = 'auto'; // 取消列表回弹效果,避免与下面me.downwarp.style.height混合,而导致界面抖动闪屏
                  me.isSetScrollAuto = true; // 标记设置了webkitOverflowScrolling为auto
                }
              }
              if (diff > 0) { // 向下拉
                me.downHight += diff * me.optDown.outOffsetRate; // 越往下,高度变化越小
              } else { // 向上收
                me.downHight += diff; // 向上收回高度,则向上滑多少收多少高度
              }
            }

            me.downwarp.style.height = me.downHight + 'px'; // 实时更新下拉区域高度
            var rate = me.downHight / me.optDown.offset; // 下拉区域当前高度与指定距离的比值
            me.optDown.onMoving(me, rate, me.downHight); // 下拉过程中的回调,一直在执行
          }
        }

        // 向上拉
      } else if (moveY < 0) {
        var scrollHeight = me.getScrollHeight(); // 滚动内容的高度
        var clientHeight = me.getClientHeight(); // 滚动容器的高度
        var toBottom = scrollHeight - clientHeight - scrollTop; // 滚动条距离底部的距离

        // 如果在底部,则阻止浏览器默认事件
        if (!me.optUp.isBounce && toBottom <= 0) me.preventDefault(e);

        // 如果不满屏或者已经在底部,无法触发scroll事件,此时需主动触发上拉回调
        if (me.optUp.use && !me.optUp.isLock && me.optUp.hasNext && !me.isUpScrolling && (!me.isDownScrolling || (me.isDownScrolling && me.optDown.isBoth)) && (clientHeight + me.optUp.offset >= scrollHeight || toBottom <= 0)) {
          me.triggerUpScroll();
        }
      }

      me.lastPoint = curPoint; // 记录本次移动的点
    }

    // 移动端手指的滑动事件
    me.scrollDom.addEventListener('touchmove', me.touchmoveEvent, {
      passive: false
    });

    // 鼠标或手指的离开事件
    me.touchendEvent = function () {
      // 如果下拉区域高度已改变,则需重置回来
      if (me.optDown.use && me.isMoveDown) {
        if (me.downHight >= me.optDown.offset) {
          // 符合触发刷新的条件
          me.triggerDownScroll();
        } else {
          // 不符合的话 则重置
          me.downwarp.classList.add(me.optDown.resetClass); // 加入高度重置的动画,过渡平滑
          me.downHight = 0;
          me.downwarp.style.height = 0;
        }
        if (me.isSetScrollAuto) {
          me.scrollDom.style.webkitOverflowScrolling = 'touch';
          me.scrollDom.classList.remove(me.optDown.hardwareClass);
          me.isSetScrollAuto = false;
        }
        me.movetype = 0;
        me.isMoveDown = false;
      }

      if (me.os.pc) {
        me.scrollDom.removeEventListener('mousemove', me.touchmoveEvent); // 移除pc端的move事件
        document.ondragstart = function () { // 解除PC端禁止拖拽图片
          return true;
        }
      }
    }

    me.scrollDom.addEventListener('mouseup', me.touchendEvent); // PC端鼠标抬起事件
    me.scrollDom.addEventListener('mouseleave', me.touchendEvent); // PC端鼠标离开事件
    me.scrollDom.addEventListener('touchend', me.touchendEvent); // 移动端手指事件
    me.scrollDom.addEventListener('touchcancel', me.touchendEvent); // 移动端系统停止跟踪触摸

    // 在页面中加入下拉布局
    if (me.optDown.use) {
      me.downwarp = document.createElement('div');
      me.downwarp.className = me.optDown.warpClass;
      me.downwarp.innerHTML = '<div class="downwarp-content">' + me.optDown.htmlContent + '</div>';
      var downparent = me.optDown.warpId ? me.getDomById(me.optDown.warpId) : me.scrollDom;
      if (me.optDown.warpId && downparent) {
        downparent.appendChild(me.downwarp);
      } else {
        if (!downparent) downparent = me.scrollDom;
        downparent.insertBefore(me.downwarp, me.scrollDom.firstChild);
      }
      // 初始化完毕的回调
      setTimeout(function () { // 待主线程执行完毕再执行,避免new MeScroll未初始化,在回调获取不到mescroll的实例
        me.optDown.inited(me, me.downwarp);
      }, 0)
    }
  }

  /* 阻止浏览器默认滚动事件 */
  MeScroll.prototype.preventDefault = function (e) {
    // cancelable:是否可以被禁用; defaultPrevented:是否已经被禁用
    if (e && e.cancelable && !e.defaultPrevented) e.preventDefault()
  }

  /* 根据点击滑动事件获取第一个手指的坐标 */
  MeScroll.prototype.getPoint = function (e) {
    return {
      x: e.touches ? e.touches[0].pageX : e.clientX,
      y: e.touches ? e.touches[0].pageY : e.clientY
    }
  }

  /* 触发下拉刷新 */
  MeScroll.prototype.triggerDownScroll = function () {
    if (!this.optDown.beforeLoading(this, this.downwarp)) { // 准备触发下拉的回调,return true则处于完全自定义状态;默认return false;
      this.showDownScroll(); // 下拉刷新中...
      this.optDown.callback && this.optDown.callback(this); // 执行回调,联网加载数据
    }
  }

  /* 显示下拉进度布局 */
  MeScroll.prototype.showDownScroll = function () {
    this.isDownScrolling = true; // 标记下拉中
    this.optDown.showLoading(this); // 下拉刷新中...
    this.downHight = this.optDown.offset; // 更新下拉区域高度
    this.downwarp.classList.add(this.optDown.resetClass); // 加入高度重置的动画,过渡平滑
    this.downwarp.style.height = this.optDown.offset + 'px'; // 调整下拉区域高度
  }

  /* 结束下拉刷新 */
  MeScroll.prototype.endDownScroll = function () {
    var me = this;
    // 结束下拉刷新的方法
    var endScroll = function () {
      me.downHight = 0;
      me.downwarp.style.height = 0;
      me.isDownScrolling = false;
      if (me.downProgressDom) me.downProgressDom.classList.remove('mescroll-rotate');
    }
    // 结束下拉刷新时的回调
    var delay = me.optDown.afterLoading(me); // 结束下拉刷新的延时,单位ms
    if (typeof delay === 'number' && delay > 0) {
      setTimeout(endScroll, delay);
    } else {
      endScroll();
    }
  }

  /* 锁定下拉刷新:isLock=ture,null锁定;isLock=false解锁 */
  MeScroll.prototype.lockDownScroll = function (isLock) {
    if (isLock == null) isLock = true;
    this.optDown.isLock = isLock;
  }

  /* -------初始化上拉加载------- */
  MeScroll.prototype.initUpScroll = function () {
    var me = this;

    // 配置参数
    me.optUp = me.options.up || {
      use: false
    };

    // 具体参数配置
    me.extendUpScroll(me.optUp);

    // 自定义滚动条 (默认只在PC端设置)
    if (me.optUp.scrollbar.use) me.scrollDom.classList.add(me.optUp.scrollbar.barClass);

    // 不允许ios的bounce时,需禁止webview的touchmove事件
    if (!me.optUp.isBounce) me.setBounce(false);

    if (me.optUp.use === false) return; // 配置不使用上拉加载时,则不初始化上拉布局
    me.optUp.hasNext = true; // 如果使用上拉,则默认有下一页

    // 在页面中加入上拉布局
    me.upwarp = document.createElement('div');
    me.upwarp.className = me.optUp.warpClass;
    var upparent;
    if (me.optUp.warpId) upparent = me.getDomById(me.optUp.warpId);
    if (!upparent) upparent = me.scrollDom;
    upparent.appendChild(me.upwarp);

    // 滚动监听
    me.preScrollY = 0;
    me.lazyStartTime = new Date().getTime();// 懒加载的初始间隔时间
    me.lazyTag = 'mescroll-lazying';// 懒加载时,图片正在加载的标记
    me.scrollEvent = function () {
      // 列表内容顶部卷去的高度(含列表边框)
      var scrollTop = me.getScrollTop();

      // 向上滑还是向下滑动
      var isUp = scrollTop - me.preScrollY > 0;
      me.preScrollY = scrollTop;

      // 如果没有在加载中
      if (!me.isUpScrolling && (!me.isDownScrolling || (me.isDownScrolling && me.optDown.isBoth))) {
        // offsetHeight 列表高度(内容+内边距+边框),滚动条在边框之内,所以使用clientHeight即可
        // clientHeight 列表高度(内容+内边距),不含列表边框
        // scrollHeight 列表内容撑开的高度
        if (!me.optUp.isLock && me.optUp.hasNext) {
          var toBottom = me.getScrollHeight() - me.getClientHeight() - scrollTop; // 滚动条距离底部的距离
          if (toBottom <= me.optUp.offset && isUp) {
            // 如果滚动条距离底部指定范围内且向上滑,则执行上拉加载回调
            me.triggerUpScroll();
          }
        }
      }

      // 顶部按钮的显示隐藏
      var optTop = me.optUp.toTop;
      if (optTop.src || optTop.html) {
        if (scrollTop >= optTop.offset) {
          me.showTopBtn();
        } else {
          me.hideTopBtn();
        }
      }

      // 懒加载
      if (me.optUp.lazyLoad.use) {
        // 节流:限制触发时间间隔
        var curTime = new Date().getTime();
        me.lazyTimer && clearTimeout(me.lazyTimer);
        if (curTime - me.lazyStartTime >= me.optUp.lazyLoad.delay) {
          me.lazyStartTime = curTime;
          me.lazyLoad(0);// 列表刚滚动的时候,懒加载一次
        } else {
          me.lazyTimer = me.lazyLoad();
        }
      }

      // 滑动监听
      me.optUp.onScroll && me.optUp.onScroll(me, scrollTop, isUp);
    }

    if (me.isScrollBody) {
      window.addEventListener('scroll', me.scrollEvent);
    } else {
      me.scrollDom.addEventListener('scroll', me.scrollEvent);
    }

    // 初始化完毕的回调
    setTimeout(function () { // 待主线程执行完毕再执行,避免new MeScroll未初始化,在回调获取不到mescroll的实例
      me.optUp.inited(me, me.upwarp);
    }, 0)
  }

  /* 是否允许ios的Bounce; true或null为允许; false禁止bounce */
  MeScroll.prototype.setBounce = function (isBounce) {
    if (this.isScrollBody || !this.os.ios) return; // 不支持body为滚动区域和非ios设备
    if (isBounce === false) {
      this.optUp.isBounce = false; // 禁止
      window.addEventListener('touchmove', this.bounceTouchmove, {
        passive: false
      });
    } else {
      this.optUp.isBounce = true; // 允许
      window.removeEventListener('touchmove', this.bounceTouchmove);
    }
  }

  /* 处理bounce的touchmove事件 */
  MeScroll.prototype.bounceTouchmove = function (e) {
    var me = this;
    var el = e.target;
    // 当前touch的元素及父元素是否要拦截touchmove事件
    var isPrevent = true;
    while (el !== document.body && el !== document) {
      var cls = el.classList;
      if (cls) {
        if (cls.contains('mescroll') || cls.contains('mescroll-touch')) {
          isPrevent = false; // 如果是指定条件的元素,则无需拦截touchmove事件
          break;
        } else if (cls.contains('mescroll-touch-x') || cls.contains('mescroll-touch-y')) {
          // 如果配置了水平或者垂直滑动
          var curX = e.touches ? e.touches[0].pageX : e.clientX; // 当前第一个手指距离列表顶部的距离x
          var curY = e.touches ? e.touches[0].pageY : e.clientY; // 当前第一个手指距离列表顶部的距离y

          if (!me.preWinX) me.preWinX = curX; // 设置上次移动的距离x
          if (!me.preWinY) me.preWinY = curY; // 设置上次移动的距离y

          // 计算两点之间的角度
          var x = Math.abs(me.preWinX - curX);
          var y = Math.abs(me.preWinY - curY);
          var z = Math.sqrt(x * x + y * y);

          me.preWinX = curX; // 记录本次curX的值
          me.preWinY = curY; // 记录本次curY的值

          if (z !== 0) {
            var angle = Math.asin(y / z) / Math.PI * 180; // 角度区间 [0,90]
            if ((angle <= 45 && cls.contains('mescroll-touch-x')) || (angle > 45 && cls.contains('mescroll-touch-y'))) {
              isPrevent = false; // 水平滑动或者垂直滑动,不拦截touchmove事件
              break;
            }
          }
        }
      }
      el = el.parentNode; // 继续检查其父元素
    }

    // 拦截touchmove事件:是否可以被禁用&&是否已经被禁用 (这里不使用me.preventDefault(e)的方法,因为某些情况下会报找不到方法的异常)
    if (isPrevent && e.cancelable && !e.defaultPrevented && typeof e.preventDefault === "function") e.preventDefault();
  }

  /* 触发上拉加载 */
  MeScroll.prototype.triggerUpScroll = function () {
    if (this.optUp.callback && !this.isUpScrolling) {
      this.showUpScroll(); // 上拉加载中...
      this.optUp.page.num++; // 预先加一页,如果失败则减回
      this.isUpAutoLoad = true; // 标记上拉已经自动执行过,避免初始化时多次触发上拉回调
      this.optUp.callback(this.optUp.page, this); // 执行回调,联网加载数据
    }
  }

  /* 显示上拉加载中 */
  MeScroll.prototype.showUpScroll = function () {
    this.isUpScrolling = true; // 标记上拉加载中
    this.upwarp.classList.add(this.optUp.hardwareClass); // 添加硬件加速样式,使动画更流畅
    this.upwarp.style.visibility = 'visible'; // 显示上拉加载区域
    this.upwarp.style.display = 'block'; // 显示上拉加载区域
    this.optUp.showLoading(this, this.upwarp); // 加载中...
  }

  /* 显示上拉无更多数据 */
  MeScroll.prototype.showNoMore = function () {
    this.upwarp.style.visibility = 'visible'; // 显示上拉加载区域
    this.upwarp.style.display = 'block'; // 显示上拉加载区域
    this.optUp.hasNext = false; // 无更多数据
    this.optUp.showNoMore(this, this.upwarp); // 无更多数据
  }

  /* 隐藏上拉区域. displayAble: 是否通过display:none隐藏, 默认false通过visibility:hidden的方式隐藏**/
  MeScroll.prototype.hideUpScroll = function (displayAble) {
    if (displayAble) {
      this.upwarp.style.display = 'none'; // 通过display:none隐藏: 优点隐藏后不占位,缺点列表快速滑动到底部不能及时显示加载中
    } else {
      this.upwarp.style.visibility = 'hidden'; // 通过visibility:hidden的方式隐藏,优点当列表快速滑动到底部能及时显示加载中,缺点隐藏后会占位
    }
    this.upwarp.classList.remove(this.optUp.hardwareClass); // 移除硬件加速样式
    var upProgressDom = this.upwarp.getElementsByClassName('upwarp-progress')[0];
    if (upProgressDom) upProgressDom.classList.remove('mescroll-rotate');
  }

  /* 结束上拉加载 */
  MeScroll.prototype.endUpScroll = function (isShowNoMore, displayAble) {
    if (isShowNoMore != null) { // isShowNoMore=null,不处理下拉状态,下拉刷新的时候调用
      if (isShowNoMore) {
        this.showNoMore(); // isShowNoMore=true,显示无更多数据
      } else {
        this.hideUpScroll(displayAble); // isShowNoMore=false,隐藏上拉加载
      }
    }
    this.isUpScrolling = false; // 标记结束上拉加载
  }

  /* 重置上拉加载列表为第一页
     *isShowLoading 是否显示进度布局;
     * 1.默认null,不传参,则显示上拉加载的进度布局
     * 2.传参true, 则显示下拉刷新的进度布局
     * 3.传参false,则不显示上拉和下拉的进度 (常用于静默更新列表数据)
     */
  MeScroll.prototype.resetUpScroll = function (isShowLoading) {
    if (this.optUp && this.optUp.use) {
      var page = this.optUp.page;
      this.prePageNum = page.num; // 缓存重置前的页码,加载失败可退回
      this.prePageTime = page.time; // 缓存重置前的时间,加载失败可退回
      page.num = 1; // 重置为第一页
      page.time = null; // 重置时间为空
      if (!this.isDownScrolling && isShowLoading !== false) { // 如果不是下拉刷新触发的resetUpScroll并且不配置列表静默更新,则显示进度;
        if (isShowLoading == null) {
          this.removeEmpty(); // 移除空布局
          this.clearDataList(); // 先清空列表数据,才能显示到上拉加载的布局
          this.showUpScroll(); // 不传参,默认显示上拉加载的进度布局
        } else {
          this.showDownScroll(); // 传true,显示下拉刷新的进度布局,不清空列表
        }
      }
      this.isUpAutoLoad = true; // 标记上拉已经自动执行过,避免初始化时多次触发上拉回调
      this.optUp.callback && this.optUp.callback(page, this); // 执行上拉回调
    }
  }

  /* 设置page.num的值 */
  MeScroll.prototype.setPageNum = function (num) {
    this.optUp.page.num = num - 1;
  }

  /* 设置page.size的值 */
  MeScroll.prototype.setPageSize = function (size) {
    this.optUp.page.size = size;
  }

  /* 清空上拉加载的数据列表 */
  MeScroll.prototype.clearDataList = function () {
    var listId = this.optUp.clearId || this.optUp.clearEmptyId; // 优先使用clearId
    if (listId) {
      var listDom = this.getDomById(listId);
      if (listDom) listDom.innerHTML = '';
    }
  }

  /* 联网回调成功,结束下拉刷新和上拉加载
     * dataSize: 当前页的数据量(必传)
     * totalPage: 总页数(必传)
     * systime: 服务器时间 (可空)
     */
  MeScroll.prototype.endByPage = function (dataSize, totalPage, systime) {
    var hasNext;
    if (this.optUp.use && totalPage != null) hasNext = this.optUp.page.num < totalPage; // 是否还有下一页
    this.endSuccess(dataSize, hasNext, systime);
  }

  /* 联网回调成功,结束下拉刷新和上拉加载
     * dataSize: 当前页的数据量(必传)
     * totalSize: 列表所有数据总数量(必传)
     * systime: 服务器时间 (可空)
     */
  MeScroll.prototype.endBySize = function (dataSize, totalSize, systime) {
    var hasNext;
    if (this.optUp.use && totalSize != null) {
      var loadSize = (this.optUp.page.num - 1) * this.optUp.page.size + dataSize; // 已加载的数据总数
      hasNext = loadSize < totalSize; // 是否还有下一页
    }
    this.endSuccess(dataSize, hasNext, systime);
  }

  /* 联网回调成功,结束下拉刷新和上拉加载
     * dataSize: 当前页的数据个数(不是所有页的数据总和),用于上拉加载判断是否还有下一页.如果不传,则会判断还有下一页
     * hasNext: 是否还有下一页,布尔类型;用来解决这个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据dataSize判断,则需翻到第三页才会知道无更多数据,如果传了hasNext,则翻到第二页即可显示无更多数据.
     * systime: 服务器时间(可空);用来解决这个小问题:当准备翻下一页时,数据库新增了几条记录,此时翻下一页,前面的几条数据会和上一页的重复;这里传入了systime,那么upCallback的page.time就会有值,把page.time传给服务器,让后台过滤新加入的那几条记录
     */
  MeScroll.prototype.endSuccess = function (dataSize, hasNext, systime) {
    var me = this;
    // 结束下拉刷新
    if (me.isDownScrolling) me.endDownScroll();

    // 结束上拉加载
    if (me.optUp.use) {
      var isShowNoMore; // 是否已无更多数据
      if (dataSize != null) {
        var pageNum = me.optUp.page.num; // 当前页码
        var pageSize = me.optUp.page.size; // 每页长度
        // 如果是第一页
        if (pageNum === 1) {
          me.clearDataList(); // 自动清空第一页列表数据
          if (systime) me.optUp.page.time = systime; // 设置加载列表数据第一页的时间
        }
        if (dataSize < pageSize || hasNext === false) {
          // 返回的数据不满一页时,则说明已无更多数据
          me.optUp.hasNext = false;
          if (dataSize === 0 && pageNum === 1) {
            // 如果第一页无任何数据且配置了空布局
            isShowNoMore = false;
            me.showEmpty();
          } else {
            // 总列表数少于配置的数量,则不显示无更多数据
            var allDataSize = (pageNum - 1) * pageSize + dataSize;
            if (allDataSize < me.optUp.noMoreSize) {
              isShowNoMore = false;
            } else {
              isShowNoMore = true;
            }
            me.removeEmpty(); // 移除空布局
          }
        } else {
          // 还有下一页
          isShowNoMore = false;
          me.optUp.hasNext = true;
          me.removeEmpty(); // 移除空布局
        }
      }

      // 隐藏上拉
      var displayAble = !me.optUp.hasNext; // 没有下一页且少于noMoreSize,则以display:none的方式隐藏上拉布局
      me.endUpScroll(isShowNoMore, displayAble);

      // 检查是否满屏自动加载下一页
      me.loadFull();

      // 懒加载
      me.optUp.lazyLoad.use && me.lazyLoad(20);
    }
  }

  /* 回调失败,结束下拉刷新和上拉加载 */
  MeScroll.prototype.endErr = function () {
    // 结束下拉,回调失败重置回原来的页码和时间
    if (this.isDownScrolling) {
      var page = this.optUp.page;
      if (page && this.prePageNum) {
        page.num = this.prePageNum;
        page.time = this.prePageTime;
      }
      this.endDownScroll();
    }
    // 结束上拉,回调失败重置回原来的页码
    if (this.isUpScrolling) {
      this.optUp.page.num--;
      this.endUpScroll(false);
    }
  }

  /* 检查如果加载的数据过少,无法触发上拉加载时,则自动加载下一页,直到满屏或者没有更多数据
     此方法最好在列表的数据加载完成之后调用,以便计算列表内容高度的准确性 */
  MeScroll.prototype.loadFull = function () {
    var me = this;
    if (me.optUp.loadFull.use && !me.optUp.isLock && me.optUp.hasNext && me.optUp.callback && me.getScrollHeight() <= me.getClientHeight()) {
      setTimeout(function () {
        // 延时之后,还需再判断一下高度,因为可能有些图片在延时期间加载完毕撑开高度
        if (me.getScrollHeight() <= me.getClientHeight()) me.triggerUpScroll();
      }, me.optUp.loadFull.delay)
    }
  }

  /* 锁定上拉加载:isLock=ture,null锁定;isLock=false解锁 */
  MeScroll.prototype.lockUpScroll = function (isLock) {
    if (isLock == null) isLock = true;
    this.optUp.isLock = isLock;
  }

  /* --------无任何数据的空布局-------- */
  MeScroll.prototype.showEmpty = function () {
    var me = this;
    var optEmpty = me.optUp.empty; // 空布局的配置
    if (optEmpty.customId) {
	  // 如果是显示自定义内容 && 该customId元素存在
      me.emptyDom = me.getDomById(optEmpty.customId);
	  if(me.emptyDom){
		me.emptyDom.style.display = 'block';
		return;
	  }
    }
    var warpId = optEmpty.warpId || me.optUp.clearEmptyId; // 优先使用warpId
    if (warpId == null) return;
    var emptyWarp = me.getDomById(warpId) // 要显示空布局的位置
    if (emptyWarp) {
      me.removeEmpty(); // 先移除,避免重复加入
      // 初始化无任何数据的空布局
      var str = '';
      if (optEmpty.icon) str += '<img class="empty-icon" src="' + optEmpty.icon + '"/>'; // 图标
      if (optEmpty.tip) str += '<p class="empty-tip">' + optEmpty.tip + '</p>'; // 提示
      if (optEmpty.btntext) str += '<p class="empty-btn">' + optEmpty.btntext + '</p>'; // 按钮
      me.emptyDom = document.createElement('div');
      me.emptyDom.className = 'mescroll-empty';
      me.emptyDom.innerHTML = str;
      emptyWarp.appendChild(me.emptyDom);
      if (optEmpty.btnClick) { // 点击按钮的回调
        var emptyBtn = me.emptyDom.getElementsByClassName('empty-btn')[0];
        if (optEmpty.supportTap) {
          emptyBtn.addEventListener('tap', function (e) {
            e.stopPropagation();
            me.preventDefault(e)
            optEmpty.btnClick();
          })
        } else {
          emptyBtn.onclick = function () {
            optEmpty.btnClick();
          }
        }
      }
    }
  }

  /* 移除空布局 */
  MeScroll.prototype.removeEmpty = function () {
	if (this.optUp.empty.customId && this.emptyDom) {
      this.emptyDom.style.display = 'none' // 隐藏自定义空布局
    } else {
      this.removeChild(this.emptyDom);
    }
  }

  /* --------回到顶部的按钮-------- */
  MeScroll.prototype.showTopBtn = function (fadeDuration) {
    if (!this.topBtnShow) {
      this.topBtnShow = true; // 标记显示
      var me = this;
      var optTop = me.optUp.toTop; // 回到顶部的配置
      if (me.toTopBtn == null) {
        // 未加入按钮,则加入
        if (optTop.html) {
          me.toTopBtn = document.createElement('div');
          me.toTopBtn.innerHTML = optTop.html;
        } else {
          me.toTopBtn = document.createElement('img');
          me.toTopBtn.src = optTop.src;
        }
        me.toTopBtn.className = optTop.warpClass;
        if (optTop.supportTap) {
          me.toTopBtn.addEventListener('tap', function (e) {
            e.stopPropagation();
            me.preventDefault(e);
            var disToTop = optTop.btnClick && optTop.btnClick(); // 执行回调
            if (disToTop !== true) { // 如果回调里return true,将不执行回到顶部操作
              me.scrollTo(0, me.optUp.toTop.duration); // 置顶
            }
          })
        } else {
          me.toTopBtn.onclick = function () {
            var disToTop = optTop.btnClick && optTop.btnClick(); // 执行回调
            if (disToTop !== true) { // 如果回调里return true,将不执行回到顶部操作
              me.scrollTo(0, me.optUp.toTop.duration); // 置顶
            }
          }
        }
        var warpDom; // 是否配置父布局
        if (optTop.warpId) warpDom = me.getDomById(optTop.warpId);
        if (!warpDom) warpDom = document.body;
        warpDom.appendChild(me.toTopBtn);
      }
      // 显示--淡入动画
      me.toTopBtn.classList.remove(optTop.hideClass);
      me.toTopBtn.classList.add(optTop.showClass);
      me.setTopBtnFadeDuration(fadeDuration);
    }
  }
  /* 隐藏回到顶部的按钮 */
  MeScroll.prototype.hideTopBtn = function (fadeDuration) {
    if (this.topBtnShow && this.toTopBtn) {
      this.topBtnShow = false;
      this.toTopBtn.classList.remove(this.optUp.toTop.showClass);
      this.toTopBtn.classList.add(this.optUp.toTop.hideClass);
      this.setTopBtnFadeDuration(fadeDuration);
    }
  }
  /* 设置回到顶部按钮的显示隐藏动画时长,默认0.5秒 */
  MeScroll.prototype.setTopBtnFadeDuration = function (fadeDuration) {
    if (this.toTopBtn) {
      var duration = (fadeDuration != null ? fadeDuration : this.optUp.toTop.fadeDuration) + 's';
      this.toTopBtn.style.animationDuration = duration;
      this.toTopBtn.style.webkitAnimationDuration = duration;
    }
  }

  /* 滑动列表到指定位置--带缓冲效果 (y=0回到顶部;如果要滚动到底部可以传一个较大的值,比如99999);t时长,单位ms,默认300 */
  MeScroll.prototype.scrollTo = function (y, t) {
    var me = this;
    var star = me.getScrollTop();
    var end = y;
    if (end > 0) {
      var maxY = me.getScrollHeight() - me.getClientHeight(); // y的最大值
      if (end > maxY) end = maxY; // 不可超过最大值
    } else {
      end = 0; // 不可小于0
    }
    me.isScrollTo = true; // 标记在滑动中,阻止列表的触摸事件
    me.scrollDom.style.webkitOverflowScrolling = 'auto';
	me.scrollDom.style.overflow = "hidden"; // 避免iOS惯性滚动的影响
    me.getStep(star, end, function (step) {
      me.setScrollTop(step);
      if (step === end) {
        me.scrollDom.style.webkitOverflowScrolling = 'touch';
		me.scrollDom.style.overflow = "auto";
        me.isScrollTo = false;
      }
    }, t)
  }

  /* 计步器
     star: 开始值
     end: 结束值
     callback(step,timer): 回调step值,计步器timer,可自行通过window.clearInterval(timer)结束计步器;
     t: 计步时长,传0则直接回调end值;不传则默认300ms
     rate: 周期;不传则默认30ms计步一次
     * */
  MeScroll.prototype.getStep = function (star, end, callback, t, rate) {
    var diff = end - star; // 差值
    if (t === 0 || diff === 0) {
      callback && callback(end);
      return;
    }
    t = t || 300; // 时长 300ms
    rate = rate || 30; // 周期 30ms
    var count = t / rate; // 次数
    var step = diff / count; // 步长
    var i = 0; // 计数
    var timer = window.setInterval(function () {
      if (i < count - 1) {
        star += step;
        callback && callback(star, timer);
        i++;
      } else {
        callback && callback(end, timer); // 最后一次直接设置end,避免计算误差
        window.clearInterval(timer);
      }
    }, rate);
  }

  /* 加载可视区域的图片 */
  MeScroll.prototype.lazyLoad = function (delay) {
    var me = this;
    var t = delay != null ? delay : me.optUp.lazyLoad.delay; // delay需支持传0,不使用短路求值
    var timer = setTimeout(function () {
      var domArr = me.scrollDom.querySelectorAll('[' + me.optUp.lazyLoad.attr + ']');
      var len = domArr.length;
      for (var i = 0; i < len; i++) {
        var dom = domArr[i];
        if (dom.getAttribute(me.lazyTag) !== 'true' && me.isInSee(dom, me.optUp.lazyLoad.offset)) {
          var imgurl = dom.getAttribute(me.optUp.lazyLoad.attr);
          // 采用临时img标签加载网络图: 1.不影响占位图; 2.成功可设置渐变动画; 3.失败后可重新触发加载;
          var temp = new Image();
          temp.onload = function () {
            var imgurl = this.src;// 需通过this取值
            var dom = this.dom;
            var showClass = me.optUp.lazyLoad.showClass;// 渐变动画
            showClass && dom.classList.add(showClass);
            if (dom.tagName === 'IMG') {
              dom.src = imgurl;// 如果是img标签,则直接设置src
            } else {
              dom.style.backgroundImage = 'url(' + imgurl + ')';// 如果其他标签,则直接设置背景
            }
            dom.removeAttribute(me.optUp.lazyLoad.attr);
            dom.removeAttribute(me.lazyTag);
          }
          temp.onerror = function () {
            this.dom.removeAttribute(me.lazyTag);// 失败的时候取消加载中的标记
          }
          temp.onabort = function () {
            this.dom.removeAttribute(me.lazyTag);// 失败的时候取消加载中的标记
          }
          temp.src = imgurl;
          // 标记在加载中..
          dom.setAttribute(me.lazyTag, 'true');
          // 把dom挂载到temp,确保在for循环的temp.onload能够正确取到对应的dom
          temp.dom = dom;
        }
      }
    }, t)
    return timer;
  }

  /* 判断元素是否在列表垂直区域可视 (不考虑scrollLeft的情况,因为没法监听每个div的水平滚动事件,也不考虑translateY的情况,因为情况比较少,且会增加计算的复杂度) */
  MeScroll.prototype.isInSee = function (dom, offset) {
    offset = offset || 0; // 可视区域上下偏移的距离
    var topDom = this.getOffsetTop(dom);// 元素顶部到容器顶部的距离
    var topSee = this.getScrollTop() - offset;// 滚动条的位置(可视范围的顶部)
    var bottomDom = topDom + dom.offsetHeight;// 元素底部到容器顶部的距离
    var bottomSee = topSee + offset + this.getClientHeight() + offset;// 滚动条的位置+容器高度(可视范围的底部)
    // 图片顶部在可视范围内 || 图片底部在可视范围 ; 不考虑scrollLeft和translateY的情况
    return (topDom < bottomSee && topDom >= topSee) || (bottomDom <= bottomSee && bottomDom > topSee);
  }

  /* 获取元素到mescroll滚动列表顶部的距离 */
  MeScroll.prototype.getOffsetTop = function (dom) {
    var top = dom.offsetTop;
    var parent = dom.offsetParent;
    while (parent != null && parent !== this.scrollDom) {
      top += parent.offsetTop + parent.clientTop;
      parent = parent.offsetParent;
    }
    return top;
  }

  /* 滚动内容的高度 */
  MeScroll.prototype.getScrollHeight = function () {
    return this.scrollDom.scrollHeight;
  }

  /* 滚动容器的高度 */
  MeScroll.prototype.getClientHeight = function () {
    if (this.isScrollBody && document.compatMode === 'CSS1Compat') {
      return document.documentElement.clientHeight;
    } else {
      return this.scrollDom.clientHeight;
    }
  }

  /* body的高度 */
  MeScroll.prototype.getBodyHeight = function () {
    return document.body.clientHeight || document.documentElement.clientHeight;
  }

  /* 滚动条的位置 */
  MeScroll.prototype.getScrollTop = function () {
    if (this.isScrollBody) {
      return document.documentElement.scrollTop || document.body.scrollTop;
    } else {
      return this.scrollDom.scrollTop;
    }
  }

  /* 滚动条到底部的距离 */
  MeScroll.prototype.getToBottom = function () {
    return this.getScrollHeight() - this.getClientHeight() - this.getScrollTop();
  }

  /* 设置滚动条的位置 */
  MeScroll.prototype.setScrollTop = function (y) {
    if (typeof y === 'number') {
      if (this.isScrollBody) {
        document.documentElement.scrollTop = y;
        document.body.scrollTop = y;
      } else {
        this.scrollDom.scrollTop = y;
      }
    }
  }

  /* 查找dom元素 */
  MeScroll.prototype.getDomById = function (id) {
    var dom;
    if (id) {
      if (typeof id === 'string') {
        dom = document.getElementById(id); // 如果是String,则根据id查找
      } else if (id.nodeType) {
        dom = id; // 如果是dom对象,则直接赋值
      }
    }
    if (!dom) console.error('the element with id as "' + id + '" can not be found: document.getElementById("' + id + '")==null');
    return dom;
  }

  /* 删除dom元素 */
  MeScroll.prototype.removeChild = function (dom) {
    if (dom) {
      var parent = dom.parentNode;
      parent && parent.removeChild(dom);
      dom = null;
    }
  }

  /* 销毁mescroll */
  MeScroll.prototype.destroy = function () {
    var me = this;

    // 移除下拉布局,移除事件
    me.scrollDom.removeEventListener('touchstart', me.touchstartEvent); // 移动端手指事件
    me.scrollDom.removeEventListener('touchmove', me.touchmoveEvent); // 移动端手指事件
    me.scrollDom.removeEventListener('touchend', me.touchendEvent); // 移动端手指事件
    me.scrollDom.removeEventListener('touchcancel', me.touchendEvent); // 移动端手指事件
    me.scrollDom.removeEventListener('mousedown', me.touchstartEvent); // PC端鼠标事件
    me.scrollDom.removeEventListener('mousemove', me.touchmoveEvent); // PC端鼠标事件
    me.scrollDom.removeEventListener('mouseup', me.touchendEvent); // PC端鼠标抬起事件
    me.scrollDom.removeEventListener('mouseleave', me.touchendEvent); // PC端鼠标离开事件
    me.removeChild(me.downwarp); // 下拉布局

    // 移除上拉布局,回到顶部按钮,移除事件
    if (me.isScrollBody) {
      window.removeEventListener('scroll', me.scrollEvent); // window的滚动事件
    } else {
      me.scrollDom.removeEventListener('scroll', me.scrollEvent); // div的滚动事件
    }
    me.removeChild(me.upwarp); // 上拉布局
    me.removeChild(me.toTopBtn); // 回到顶部按钮

    // 允许回弹,解除禁止webview的touchmove事件
    me.setBounce(true);
  }

  return MeScroll;
});