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,如需转载请自行联系原作者