• 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
            }
        });
    };
    
  • 相关阅读:
    angular面试记忆的内容
    doctype
    161214、oracle查询表信息
    161213、Maven资源替换和Freemarker模板
    161212、并发编程中的关于队列
    161209、简要分析ZooKeeper基本原理及安装部署
    161208、Java enum 枚举还可以这么用
    161207、高并发:java.util.concurrent.Semaphore实现字符串池及其常用方法介绍
    161206、 Ionic、Angularjs、Cordova搭建Android开发环境
    161205、win10安装mysql5.7.16数据库
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/5959813.html
Copyright © 2020-2023  润新知