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,如需转载请自行联系原作者
相关文章
|
8月前
|
JavaScript
原生js中offsetTop, offsetLeft与offsetParent的详细讲解
原生js中offsetTop, offsetLeft与offsetParent的详细讲解
|
1天前
|
前端开发 JavaScript API
React 图片放大组件 Image Zoom
本文介绍如何使用React创建图片放大组件(Image Zoom),提升用户体验。组件通过鼠标悬停或点击触发放大效果,利用`useState`管理状态,CSS实现视觉效果。常见问题包括图片失真、性能下降和移动端支持,分别可通过高质量图片源、优化事件处理和添加触摸事件解决。易错点涉及状态管理混乱、样式冲突和过多事件绑定,建议使用上下文API、CSS模块及优化事件绑定逻辑。高级功能扩展如多张图片支持和自定义放大区域进一步丰富了组件的实用性。
38 25
|
8月前
|
安全 iOS开发
浏海屏手机在部分页面通过[[UIApplication sharedApplication] delegate].window.safeAreaInsets.bottom得到底部安全区高度为0问题
浏海屏手机在部分页面通过[[UIApplication sharedApplication] delegate].window.safeAreaInsets.bottom得到底部安全区高度为0问题
72 0
|
移动开发 前端开发
h5 video以及img控件加上border显示不全的解决方案!
h5 video以及img控件加上border显示不全的解决方案!
376 0
应用程序icon及UITabBar又上角带红圈中数字的实现
应用程序icon及UITabBar又上角带红圈中数字的实现
73 0
|
开发框架 小程序 开发工具
APICloud AVM框架列表组件list-view的使用、flex布局教程
avm.js 是APICloud 推出的多端开发框架。使用 avm.js 一个技术栈可同时开发 Android & iOS 原生 App、小程序和 iOS 轻 App,且多端渲染效果统一;全新的 App 引擎 3.0 不依赖 webView,提供百分百的原生渲染,保障 App 性能和体验与原生 App 一致。
215 0
APICloud AVM框架列表组件list-view的使用、flex布局教程
|
移动开发 Android开发
开源一个图片组件 react-native-border-radius-image
开源一个图片组件 react-native-border-radius-image
243 0
开源一个图片组件 react-native-border-radius-image
【错误记录】Flutter 使用 MediaQuery 适配全面屏报错 ( No MediaQuery widget ancestor found. )
【错误记录】Flutter 使用 MediaQuery 适配全面屏报错 ( No MediaQuery widget ancestor found. )
878 0
【错误记录】Flutter 使用 MediaQuery 适配全面屏报错 ( No MediaQuery widget ancestor found. )
|
JavaScript 前端开发
你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?
你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗?