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
        }
    });
};


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5959813.html,如需转载请自行联系原作者
相关文章
|
6月前
|
JavaScript
原生js中offsetTop, offsetLeft与offsetParent的详细讲解
原生js中offsetTop, offsetLeft与offsetParent的详细讲解
Element UI - el-scrollbar 如何隐藏横向滚动条?
Element UI - el-scrollbar 如何隐藏横向滚动条?
596 0
|
JavaScript
jQuery 坐标值操作 offset()、position()、scrollTop()、scrollLeft()
jQuery 坐标值操作 offset()、position()、scrollTop()、scrollLeft()
48 0
|
JavaScript 前端开发
height、clientHeight、scrollHeight、offsetHeight区别
height、clientHeight、scrollHeight、offsetHeight区别
height、clientHeight、scrollHeight、offsetHeight区别
|
移动开发 前端开发
h5 video以及img控件加上border显示不全的解决方案!
h5 video以及img控件加上border显示不全的解决方案!
276 0
|
前端开发
将div铺满body三种方式
将div铺满body三种方式
315 0
element-ui:el-dialog遮罩层变黑
element-ui:el-dialog遮罩层变黑
541 0
|
JavaScript 前端开发
你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?
你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?
下一篇
无影云桌面