apiCloud中aui获取不到高度,pos.h为0,offsetHeight为0问题

apiCloud中aui获取不到高度,pos.h为0,offsetHeight为0问题

原HTML

<div  class="row aui-text-center">
        <div class="aui-col-xs-2" style="cursor: pointer;" onclick="api.closeWin({});">
            <i class="aui-iconfont aui-icon-left"></i>
        </div>
        <div class="aui-col-xs-8">
            <div class="aui-searchbar-input aui-border-radius" style="margin:0.4rem 0" tapmode="" onclick="">
                <i class="aui-iconfont aui-icon-search"></i>
                <form action="javascript:search();">
                    <input type="search" placeholder="请输入搜索内容" id="search-input">
                </form>
            </div>
        </div>
        <div class="aui-col-xs-2">
            <i class="aui-iconfont aui-icon-menu"></i>
        </div>
</div>

现HTML

<div  class="aui-row row aui-text-center"> <!--aui-row 清除浮动影响,获取元素高度 -->
        <div class="aui-col-xs-2" style="cursor: pointer;" onclick="api.closeWin({});">
            <i class="aui-iconfont aui-icon-left"></i>
        </div>
        <div class="aui-col-xs-8">
            <div class="aui-searchbar-input aui-border-radius" style="margin:0.4rem 0" tapmode="" onclick="">
                <i class="aui-iconfont aui-icon-search"></i>
                <form action="javascript:search();">
                    <input type="search" placeholder="请输入搜索内容" id="search-input">
                </form>
            </div>
        </div>
        <div class="aui-col-xs-2">
            <i class="aui-iconfont aui-icon-menu"></i>
        </div>
</div>

使用栅格的时候,需要在外部包裹一个aui-row。

.aui-row {
    overflow: hidden;
    margin: 0;
}

有了这个class,元素高度就能获取到了。否是会得到0。因为栅格模式中的float浮动会影响高度获取。

JS

apiready = function(){
    var header = $api.byId('main');
    $api.fixStatusBar(header);
    var pos = $api.offset(header);

    api.openFrame({
        name: 'store_homeCon',
        url: 'store_homeCon.html',
        rect:{
            x: 0,
            y: pos.h, // 获取高度
            w: 'auto',
            h: 'auto'
        },
        bounces: true,
        opaque: true,
        vScrollBarEnabled: false,
        reload: true,
        pageParam:{
            store_id:api.pageParam.store_id
        }
    });
};
原文地址:https://www.cnblogs.com/jiqing9006/p/5959813.html