以前写过vue 滚动加载、angular8 滚动加载,这次遇到angularJs 滚动加载,记录一下
1, html 页面
需要在滚动的div 上添加控制代码 ng-controller="myProController" 和滚动指令 when-scrolled="scrolledLoadMore()"
<div class="ngdialog-message" bindonce>
<div class="select-group-user-container" ng-controller="myProController">
<div class="left">
<div class="left-list" ng-class="{'active': imageClassify == 'personal'}" ng-click="selectImageClassify('personal')">个人库</div>
<div class="left-list" ng-class="{'active': imageClassify == 'system'}" ng-click="selectImageClassify('system')">系统库</div>
</div>
<div class="right" when-scrolled="scrolledLoadMore()">
<div class="img-concent" ng-show="selectImageList.length > 0">
<div class="concent-div" ng-repeat="(key, imgfile) in selectImageList track by key" ng-if="['jpg', 'png', 'jpeg', 'gif', 'bmp'].indexOf(imgfile.obj_type) > -1">
<img src="{{imgfile.url}}"
class="img-style"
alt="加载中...">
<div class="img-select" ng-click="selectImg(imgfile)">
<img ng-if="pageImageSrc == imgfile.url" src="/static/img/bdp-ok.png" class="img-select-svg"/>
</div>
<div class="img-name" title="{{imgfile.obj_name}}">{{imgfile.obj_name}}</div>
</div>
</div>
<div class="nodata" ng-show="!isSelectImageList && selectImageList.length === 0">
暂无数据
</div>
<div class="nodata" ng-show="!isSelectImageList && getImageListParam.page === selectImageListPagesCount && selectImageList.length > 30">
没有更多了
</div>
</div>
</div>
</div>
2,js 代码
.controller ("myProController", [ "$scope", function ( $scope ) {
// 触发事件
$scope.scrolledLoadMore = function() {
$scope.$parent.$parent.getImageListMore();
}
}]).directive ('whenScrolled', function () {
return function ( scope, elm, attr ) {
// 内层DIV的滚动加载
var raw = elm[ 0 ];
elm.bind ('scroll', function () {
if ( raw.scrollTop + raw.offsetHeight >= raw.scrollHeight ) {
scope.$apply (attr.whenScrolled);
}
});
};
});