zqy009
zqy009
  • 发布:2019-04-25 11:41
  • 更新:2019-04-25 13:51
  • 阅读:2998

【报Bug】uniapp样式条件编译无效

分类:uni-app

详细问题描述

项目中需要兼容H5版和app版,在style样式中,使用了条件编译,条件编译有时候会生效,有时候不会生效.

在更新HbuilderX 1.9.3.20190422第一天,预处理样式编译 / #ifdef APP-PLUS / / #ifdef /在H5版不生效,在APP版生效;在更新HbuilderX 1.9.3.20190422第三天,相同的代码预处理样式编译 / #ifdef APP-PLUS / / #ifdef /在H5版和APP版同时生效,style代码如下:
<style lang="scss">
.pageHead{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 0 25upx;
height:88upx;
/ #ifdef APP-PLUS /
padding-top:var(--status-bar-height);
height:calc(var(--status-bar-height) + 88upx);
/ #endif /
z-index: 1001;
background: #fff;
border-bottom: 1upx solid #f3f4f5;
&.bgWhite{
background: transparent;
border-bottom:0;
}
}
</style>
改为如下代码后,在H5和APP都生效
<style>
.pageHead{
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
align-items: center;
padding: 0 25upx;
height:88upx;
/ #ifdef APP-PLUS /
padding-top:var(--status-bar-height);
height:calc(var(--status-bar-height) + 88upx);
/ #endif /
z-index: 1001;
background: #fff;
border-bottom: 1upx solid #f3f4f5;
}
</style>

在另外一个界面,使用同样的编译方式 ,在H5版和APP版都不生效
<style lang="scss">
.my-index-container{
padding-top: 280upx;
min-height: 100%;
/#ifdef APP-PLUS/
padding-top: calc(var(--status-bar-height) + 280upx);
/#endif/
}
</style>
改为如下代码以后,在H5版和APP版也不生效:
<style>
.my-index-container{
padding-top: 280upx;
min-height: 100%;
/#ifdef APP-PLUS/
padding-top: calc(var(--status-bar-height) + 280upx);
/#endif/
}
</style>

[内容]

重现步骤

[步骤]

[结果]

[期望]

在h5和APP版,能稳定地使用style样式条件编译

IDE运行环境说明

开发工具:BuilderX

版本号:1.9.3.20190422

windows 10专业版 win10x64

uni-app运行环境说明

[运行端是h5或app或某个小程序?]运行端包括 h5电脑浏览器上运行,app版在真机运行

[项目是HBuilderX创建的】

App运行环境说明

附件

[可重现代码片段]

联系方式

[QQ]:550129196

2019-04-25 11:41 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

上传一下关键代码的文件吧

  • zqy009 (作者)

    关键代码已上传

    2019-04-25 13:17

zqy009

zqy009 (作者)

code.rar为关键代码文件

  • Trust

    测试没重现问题,详细见下面截图。

    2019-04-25 13:50

Trust

Trust - 少说废话

H5 平台的结果

  • zqy009 (作者)

    这一段在H5版浏览器上是没有问题的,是正常的,但是在app版,这一段应该是生效的,padding-top应该等于状态栏的高度+140px。但是在app上这个padding-top依然是 140px。


    另外一个文件page-head.vue中:/ #ifdef APP-PLUS /

    padding-top:var(--status-bar-height);

    height:calc(var(--status-bar-height) + 88upx);

    / #endif / 这一段应该只在app版生效,但是在浏览器中 padding-top:0,height:0这就不正常了。在app上这一段又是正常的

    2019-04-25 14:51

该问题目前已经被锁定, 无法添加新回复