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,如需转载请自行联系原作者
相关文章
|
2天前
|
JavaScript
原生js中offsetTop, offsetLeft与offsetParent的详细讲解
原生js中offsetTop, offsetLeft与offsetParent的详细讲解
element-ui 里 el-popover 位置发生偏移
element-ui 里 el-popover 位置发生偏移
807 0
Element UI - el-scrollbar 如何隐藏横向滚动条?
Element UI - el-scrollbar 如何隐藏横向滚动条?
503 0
Element el-color-picker 颜色选择器详解
本文目录 1. 前言 2. 基本用法 3. 带默认值 4. 调整尺寸 5. 小结
1974 0
Element el-color-picker 颜色选择器详解
|
8月前
|
JavaScript
jQuery 坐标值操作 offset()、position()、scrollTop()、scrollLeft()
jQuery 坐标值操作 offset()、position()、scrollTop()、scrollLeft()
35 0
|
2天前
|
JavaScript
Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be
Can‘t get DOM width or height. Please check dom.clientWidth and dom.clientHeight. They should not be
201 0
|
6月前
|
JavaScript 前端开发
height、clientHeight、scrollHeight、offsetHeight区别
height、clientHeight、scrollHeight、offsetHeight区别
height、clientHeight、scrollHeight、offsetHeight区别
|
10月前
|
JavaScript 容器
Element UI - v-infinite-scroll无限滚动组件
Element UI - v-infinite-scroll无限滚动组件
372 0
|
11月前
|
移动开发 前端开发
h5 video以及img控件加上border显示不全的解决方案!
h5 video以及img控件加上border显示不全的解决方案!
229 0
|
编解码 前端开发 JavaScript
Canvas+HTML+CSS+Position定位
Canvas+HTML+CSS+Position定位
Canvas+HTML+CSS+Position定位