angular directive实现触底加载效果一则

核心javascript代码:
.directive('ngMouseWheelDownNextPage', function () {
    return function (scope, element, attrs) {
        element.bind("DOMMouseScroll mousewheel onmousewheel", function (event) {

            // cross-browser wheel delta
            var event = window.event || event; // old IE support
            var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));
            //mouse wheel down event
            if (delta < 0) {
               if(attrs.$$element[0].scrollTop>0 && (attrs.$$element[0].offsetHeight + attrs.$$element[0].scrollTop >
                  50 + document.querySelectorAll('ul.log-content')[0].offsetHeight)){
                  scope.$apply(function () {
                    scope.$eval(attrs.ngMouseWheelDownNextPage);
                  });
                  // for IE
                  event.returnValue = false;
                  // for Chrome and Firefox
                  if (event.preventDefault) {
                      event.preventDefault();
                  }
               }

            }
        });
    };
})
核心html:

    
        

            

                {$ log.log $}
            

        

                      data-ng-show="model.logs.isLoading&&model.logs.canBeTriggered">{$ model.context.log.isLoading $}
                      data-ng-show="model.logs.items.length == 0&&model.logs.isRequestFinish&&!(model.logs.isLoading&&model.logs.canBeTriggered)">
            {$ model.context.log.noLogs $}
        
                   ng-show="!(model.logs.items.length == 0&&model.logs.isRequestFinish)&&(model.logs.isRequestFinish&&model.logs.hasMorePage&&model.logs.canBeTriggered)"
           ng-click="model.nextPage()">{$ model.context.log.scrollTips $}

    

代码解读:
log-panel是有滚动条的div log-content是div内的内容, 核心思想是log-panel scrollTop+ log-panel height>=log-content height + 一定的偏移量, 就 触发下拉加载事件

转载于:https://www.cnblogs.com/braveliuchina/p/6911697.html

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！