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,如需转载请自行联系原作者
相关文章
|
机器学习/深度学习 算法 计算机视觉
使用sklearn进行特征选择
背景 一个典型的机器学习任务,是通过样本的特征来预测样本所对应的值。如果样本的特征少,我们会考虑增加特征。而现实中的情况往往是特征太多了,需要减少一些特征。
|
12月前
|
前端开发 JavaScript 搜索推荐
Marp 入门与教程:让你一分钟爱上代码写PPT的乐趣
Marp 是一个基于 Markdown 的开源幻灯片制作工具,可将 Markdown 文档轻松转换为精美幻灯片。支持 VS Code 插件实时预览、命令行工具批量处理、自定义主题等,适用于技术分享、工作汇报和教学等多种场景。相比 LaTeX Beamer,Marp 学习成本低,跨平台支持好,设计现代美观。
|
开发框架 .NET C#
VSCode开发.net项目时调试无效
【9月更文挑战第22天】在使用 VSCode 开发 .NET 项目时遇到调试问题,可从项目配置、调试配置、调试器安装、运行环境、日志和错误信息等方面排查。确认项目类型及文件配置,检查 `launch.json` 文件及配置项,确保调试器扩展已安装并启用,验证 .NET 运行时版本和环境变量,查看 VSCode 输出窗口和项目日志文件,检查权限及代码错误。若问题仍未解决,可查阅官方文档或社区论坛。
558 5
基于QT实现的拷贝文件以及实时进度条(简易版)
1.基于按钮或者菜单栏的槽里去写逻辑函数(我这边用的是菜单栏),ui实现的进度条 2.创建两个对象,一个是源文件,一个是目标文件分别用getopenfileName、getsavefileName函数即可。 3.利用QFile类去实现对两个文件的创建,因为QFile中可以获取文件的属性已经读写等。 4.循环的去读取源文件中的数据,然后写入目标文件
1155 6
|
容灾 Shell Nacos
【Seata】seata的部署和集成
一、部署Seata的tc-server 1.下载 首先我们要下载seata-server包,地址在http://seata.io/zh-cn/blog/download.html
618 0
|
XML Java 测试技术
Graalvm 替代 JVM 真的可以带来巨大的性能优势吗?
介绍 Spring Boot有助于轻松开发独立的、可用于生产的 Spring 应用程序。它对 Spring 平台和第三方库采用固执己见的方法:以最少的配置简化设置过程。优势: 易于使用:Spring Boot 简化了独立 Spring 应用程序的创建,无需复杂的配置。 嵌入式服务器:它允许直接嵌入 Tomcat、Jetty 或 Undertow 等服务器,从而无需单独部署 WAR 文件。 Starter 依赖项:Spring Boot 提供预配置的“starter”依赖项,降低了构建配置的复杂性。 自动配置:Spring Boot 自动配置 Spring 和第三方库,最大限度地减少手动设置工
|
关系型数据库 MySQL Java
译 | Off-CPU Flame Graphs
译 | Off-CPU Flame Graphs
456 0
|
SQL 存储 算法
clickhouse SQL优化
clickhouse 是 OLAP 数据库,但其具有独特的索引设计,所以如果拿 MySQL 或者其他 RDB 的优化经验来优化 clickhouse 可能得不到很好的效果,所以特此单独整理一篇文档,用于有 SQL 优化需求的同学,本人接触 clickhouse 时间也不长,难免有不足的地方,如果大家发现错误,还请不吝指正。
83981 3
|
存储 JSON NoSQL
【文档数据库】ES和MongoDB的对比
【文档数据库】ES和MongoDB的对比
1152 1
N..
|
开发框架 Dart 开发工具
搭建Flutter开发环境
搭建Flutter开发环境
N..
332 0