ion-scroll滚动到底部事件

来源:互联网 发布:淘宝打包员是蹲着做吗 编辑:程序博客网 时间:2024/06/10 17:06

部分代码块

  <ion-scroll delegate-handle="mainScroll" zooming="true" min-zoom='1' max-zoom='5' direction="xy" scrollbar-x="false" scrollbar-y="false"
        device-width on-scroll="onScroll()">
            <div class="ub c-images" id="images-scroll">
                <ul>
                    <li class="img" ratio-scale="1.6:1" ng-repeat="img in imgs.images">
                    <!--图片懒加载 image-lazy-src="{{img}}" image-lazy-background-image="true"-->
                        <i class="c-border background-img-pdf" style="background-image: url({{img}});"
                         image-preview="{{imgs.images}}" multiple="true" index="{{$index}}"></i>
                    </li>
                </ul>
            </div>
        </ion-scroll>

1.首先获取元素的高度 当前滚动列表的整体高度 

var imagesScroll= document.getElementById("images-scroll");//原生的方法获取dom

2.ion-scroll绑定on-scroll事件 

  $scope.onScroll = function () {
        $scope.imagesposition = $ionicScrollDelegate.$getByHandle('mainScroll').getScrollPosition();
        if ($scope.imagesposition) {         
           // console.log(parseInt($scope.imagesposition.top))

//当前滚动的总高度减去页面其他部分的高度
            $scope.imagesscrollDown=angular.element(imagesScroll)[0].offsetHeight-550;


             //console.log($scope.imagesscrollDown)

//做对比
             if(parseInt($scope.imagesposition.top) >= $scope.imagesscrollDown){
              Xalert.loading('该章节已学完');
                sourseEvent.completed(course_id, chapterid, 2); 
             }else{
              sourseEvent.completed(course_id, chapterid, 1, 0.5);
             }
        }


    }

3 0
原创粉丝点击