AngularJS判断页面是否已经渲染结束

最新推荐文章于 2023-07-05 16:12:23 发布

Gherardo

最新推荐文章于 2023-07-05 16:12:23 发布

阅读量2.9k

点赞数

分类专栏： html+css 页面布局

本文链接：https://blog.csdn.net/u011391655/article/details/73600765

版权

html+css 页面布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

相信大家都会碰到这样的问题。页面循环li。但是因为个数不知道。没有办法给li设置固定宽度。那么这时就需要动态计算数据长度并动态改变li的宽度

<!--周边信息-->
        <div class="around_information">
            <div class="title_info">
                <i></i>
                <p>周边信息</p>
            </div>
            <div class="around_info">
                <div class="around_table">
                    <ul>
                        <li class="aroundLength" ng-repeat="data in aroundInfoData" on-finish-render-filters>
                            <label>{{data.aroundName}}</label>
                            <p>{{data.aroundNum}}</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

<li></li>可以默认给个固定宽度，当然不给也是完全OK的

控制器中的数据信息：

$scope.aroundInfoData =[{"aroundName":"所在商圈", "aroundNum":"李宁商圈"},
    {"aroundName":"安踏", "aroundNum":"0"}, {"aroundName":"特步", "aroundNum":"1"},
    {"aroundName":"361°", "aroundNum":"0"},{"aroundName":"高中", "aroundNum":"3"},
    {"aroundName":"耐克", "aroundNum":"0"},{"aroundName":"阿迪达斯", "aroundNum":"2"},
    {"aroundName":"瑜伽馆", "aroundNum":"1"},{"aroundName":"大学", "aroundNum":"2"},
    {"aroundName":"篮球馆", "aroundNum":"0"},{"aroundName":"健身房", "aroundNum":"0"}]

json数据可以自己造。想造多少都可以

需要今天页面是否渲染结束。AngularJS有$last是最后一个元素。用到指令

app.directive('onFinishRenderFilters', function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function() {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    };
});

Controller里面用$on去监听

$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
        //监听页面渲染结束
       $scope.showLength =$scope.aroundInfoData.length //把实际需要展示数据的格式赋给showLength
       var titleWidth = document.getElementsByClassName("aroundLength");
       for(var i =0;i<document.getElementsByClassName("aroundLength").length;i++){
           document.getElementsByClassName("aroundLength")[i].style.width = (100/$scope.showLength)+"%";
       }
    });