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,如需转载请自行联系原作者
相关文章
Element UI - el-scrollbar 如何隐藏横向滚动条?
Element UI - el-scrollbar 如何隐藏横向滚动条?
602 0
|
前端开发 容器
如何使用CSS Grid 居中 div
如何使用CSS Grid 居中 div
115 0
|
移动开发 前端开发
h5 video以及img控件加上border显示不全的解决方案!
h5 video以及img控件加上border显示不全的解决方案!
283 0
|
前端开发
web前端-CSS(display,position,overflow和浮动float)
web前端-CSS(display,position,overflow和浮动float)
130 0
|
JavaScript 小程序 前端开发
uni-app/微信小程序:scroll-view纵向滚动高度自适应flex布局填充剩余高度
uni-app/微信小程序:scroll-view纵向滚动高度自适应flex布局填充剩余高度
1133 0
|
前端开发
前端知识点1-text align是写在父级居中还是子级
前端知识点1-text align是写在父级居中还是子级
85 0
|
前端开发
将div铺满body三种方式
将div铺满body三种方式
315 0
element-ui:el-dialog遮罩层变黑
element-ui:el-dialog遮罩层变黑
546 0