Iscroll5-上下拉动刷新

最新推荐文章于 2022-10-02 10:03:36 发布

转载最新推荐文章于 2022-10-02 10:03:36 发布 · 734 阅读

Ionic 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个Angular模块的实现，用于在页面滚动到特定百分比时触发JS表达式，包括设置滚动监听和使用IScroll库进行页面滚动管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自: http://www.cnblogs.com/mrxia/p/3868126.html

具体的文章我就不转载了. 粘贴下公司项目逇实现吧

<span style="font-size:14px;">/*@author Tushar Borole
 * @description user has to jsut mention the percent, on completion of that percentage scroll; expression will be fired
 * for example <div id="fixed" when-scrolled="loadMore()" percent="70">*/

var scroll = angular.module('angular-scroll-complete', []);

scroll.run(function() {
	document.ontouchmove = function(e) {
		e.preventDefault();
	};
});

scroll.directive('whenScrolled', function () {
    return function ($scope, elm, attr) {
        var raw = elm[0];
        var scrollCompleted = true;
		
        $scope.$on('scrollCompleted', function () {
            scrollCompleted = true;
        });

		$scope.scrollCompleted = function() {
			scrollCompleted = true;
		};

        elm.bind('scroll', function() {
			var scroll = elm.data("iscroll");

            var remainingHeight = raw.offsetHeight - raw.scrollHeight;
            var scrollTop = raw.scrollTop;	

			if (scroll != null)
				scrollTop = scroll.y;

            var percent = Math.abs((scrollTop / remainingHeight) * 100);
			
            if (percent > attr.percent) {
                if (scrollCompleted) {
                    scrollCompleted = false;
                    $scope.$apply(attr.whenScrolled);
                }
            }
        });
    };
});

scroll.directive('ngScroll', function($interval) {
	return function($scope, elm, attr) {
		if (elm.children().length > 1)
		{
			elm.children().wrapAll("<div></div>");
		}

		var scroll = new IScroll(elm[0], {
			bounce: false,
			scrollbars: false,
			click: true,
			probeType: 1
		});

		elm.data("iscroll", scroll);

		scroll.on("scroll", function() {
			elm.scroll();
		});

		$interval(function() {
			try
			{
				scroll.refresh();
			} catch(err)
			{ }
		}, 500);
	};
});
</span>