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