zoukankan      html  css  js  c++  java
  • 修改版的echojs支持iScroll

    echojs监听窗体的scroll事件,使用iScroll,不会触发window的scroll事件。

    给echojs初始化时传入实例化后的iScroll对象,echojs添加iScroll对象的scrollEnd事件监听事件。

    /*! echo-js v1.7.3 | (c) 2016 @toddmotto | https://github.com/toddmotto/echo */
    (function (root, factory) {
      if (typeof define === 'function' && define.amd) {
        define(function () {
          return factory(root);
        });
      } else if (typeof exports === 'object') {
        module.exports = factory;
      } else {
        root.echo = factory(root);
      }
    })(window, function (root) {
    
      'use strict';
    
      var echo = {};
    
      var callback = function () {
      };
    
      var offset, poll, delay, useDebounce, unload;
    
      var isHidden = function (element) {
        return (element.offsetParent === null);
      };
    
      var inView = function (element, view) {
        if (isHidden(element)) {
          return false;
        }
    
        var box = element.getBoundingClientRect();
        return (box.right >= view.l && box.bottom >= view.t && box.left <= view.r && box.top <= view.b);
      };
    
      var debounceOrThrottle = function () {
        if (!useDebounce && !!poll) {
          return;
        }
        clearTimeout(poll);
        poll = setTimeout(function () {
          echo.render();
          poll = null;
        }, delay);
      };
    
      echo.init = function (opts) {
        opts = opts || {};
        var offsetAll = opts.offset || 0;
        var offsetVertical = opts.offsetVertical || offsetAll;
        var offsetHorizontal = opts.offsetHorizontal || offsetAll;
        var optionToInt = function (opt, fallback) {
          return parseInt(opt || fallback, 10);
        };
        offset = {
          t: optionToInt(opts.offsetTop, offsetVertical),
          b: optionToInt(opts.offsetBottom, offsetVertical),
          l: optionToInt(opts.offsetLeft, offsetHorizontal),
          r: optionToInt(opts.offsetRight, offsetHorizontal)
        };
        delay = optionToInt(opts.throttle, 250);
        useDebounce = opts.debounce !== false;
        unload = !!opts.unload;
        callback = opts.callback || callback;
        echo.render();
        if (opts.iScroll) {
          opts.iScroll.on('scrollEnd',debounceOrThrottle);
          root.addEventListener('load', debounceOrThrottle, false);
        } else if (document.addEventListener) {
          root.addEventListener('scroll', debounceOrThrottle, false);
          root.addEventListener('load', debounceOrThrottle, false);
        } else {
          root.attachEvent('onscroll', debounceOrThrottle);
          root.attachEvent('onload', debounceOrThrottle);
        }
      };
    
      echo.render = function (context) {
        var nodes = (context || document).querySelectorAll('[data-echo], [data-echo-background]');
        var length = nodes.length;
        var src, elem;
        var view = {
          l: 0 - offset.l,
          t: 0 - offset.t,
          b: (root.innerHeight || document.documentElement.clientHeight) + offset.b,
          r: (root.innerWidth || document.documentElement.clientWidth) + offset.r
        };
        for (var i = 0; i < length; i++) {
          elem = nodes[i];
          if (inView(elem, view)) {
    
            if (unload) {
              elem.setAttribute('data-echo-placeholder', elem.src);
            }
    
            if (elem.getAttribute('data-echo-background') !== null) {
              elem.style.backgroundImage = 'url(' + elem.getAttribute('data-echo-background') + ')';
            }
            else if (elem.src !== (src = elem.getAttribute('data-echo'))) {
              elem.src = src;
            }
    
            if (!unload) {
              elem.removeAttribute('data-echo');
              elem.removeAttribute('data-echo-background');
            }
    
            callback(elem, 'load');
          }
          else if (unload && !!(src = elem.getAttribute('data-echo-placeholder'))) {
    
            if (elem.getAttribute('data-echo-background') !== null) {
              elem.style.backgroundImage = 'url(' + src + ')';
            }
            else {
              elem.src = src;
            }
    
            elem.removeAttribute('data-echo-placeholder');
            callback(elem, 'unload');
          }
        }
        if (!length) {
          echo.detach();
        }
      };
    
      echo.detach = function () {
        if (document.removeEventListener) {
          root.removeEventListener('scroll', debounceOrThrottle);
        } else {
          root.detachEvent('onscroll', debounceOrThrottle);
        }
        clearTimeout(poll);
      };
    
      return echo;
    
    });

    调用

     var myBScroll = new BScroll('.history_wrapper', {probeType: 2});
      
        echo.init({
          // offset: 100,
          // throttle: 250,
          // unload: false,
          iScroll: myBScroll,
          callback: function (element, op) {
            console.log(element, 'has been', op + 'ed')
          }
        });
  • 相关阅读:
    小技巧:通过linux一行命令修改ip
    小技巧:textarea文本输入区内实现换行
    set 排序实例
    每日日报
    每日日报
    每日日报
    每日日报
    每日日报
    每日日报
    每日日报
  • 原文地址:https://www.cnblogs.com/Koming/p/10001367.html
Copyright © 2011-2022 走看看