uni-app 系统状态栏高度CSS变量--status-bar-height

  • var(--status-bar-height) 此变量在微信小程序环境为固定 25px,在 App 里为手机实际状态栏高度。
  • 当设置 "navigationStyle":"custom" 取消原生导航栏后,由于窗体为沉浸式,占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部,避免页面内容出现在状态栏。
  • 目前 nvue 在 App 端,还不支持 --status-bar-height变量,替代方案是在页面 onLoad 时通过 uni.getSystemInfoSync().statusBarHeight 获取状态栏高度,然后通过 style 绑定方式给占位 view 设定高度。下方提供了示例代码
<template>
	<!-- HBuilderX 2.6.3+ 新增 page-meta, 详情:https://uniapp.dcloud.io/component/page-meta -->
	<page-meta>
		<navigation-bar />
	</page-meta>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view>状态栏下的文字</view>
	</view>
</template>
<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<#include "/static/scripts/headIframe.ftl"/> <table width="100%" cellpadding="0" cellspacing="0" class="list_box1"> <script type="text/javascript" src="${base}/static/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ // General options mode : "exact", elements : "exPlainInfo.content", theme : "advanced", skin : "o2k7", plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups", // Theme options theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect", theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor", theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen", theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, // Example content CSS (should be your site CSS) content_css : '<c:url value="/tinymce/examples/css/content.css"></c:url>', // Drop lists for link/image/media/template dialogs template_external_list_url : '<c:url value="/tinymce/examples/lists/template_list.js"></c:url>', external_link_list_url : '<c:url value="/tinymce/examples/lists/link_list.js"></c:url>', external_image_list_url : '<c:url value="/tinymce/examples/lists/image_list.js"></c:url>', media_external_list_url : '<c:url value="/tinymce/examples/lists/media_list.js"></c:url>', // Replace values for the template plugin template_replace_values : { username : "Some User", staffid : "991234" } }); </script> <form name="actionForm" method="post" action="exPlainInfo.action?method=save" onSubmit="return false;"> <input type="hidden" name="exPlainInfo.id" value="${(exPlainInfo.id)?if_exists}"/> <input type="hidden" name="exPlainInfo.sittypeid.id" value="${(exPlainInfo.sittypeid.id)?if_exists}"/> <@searchParams/> <tr> <td class="list_box1_title2">信息名称:<font color="red">*</font></td> <td> <input name="exPlainInfo.title" id="exPlainInfo.title" class="ip5" value="${(exPlainInfo.title)?default("")}"/> </td> </tr> <tr> <td class="list_box1_title2">信息类别:  </td> <td> <select name="exPlainInfo.infotypeid.id"> <#list sysInfoTypeList as item> <option value="${(item.id)?default("")}" <#if (((item.id)?default(""))?string)==(((exPlainInfo.infotypeid.id)?default(""))?string)>selected="selected"</#if>>${(item.parametername)?default("")}</option> </#list> </select> </td> </tr> <tr> <td class="list_box1_title2">是否可用:  </td> <td> <input type="radio" checked="checked" <#if (((exPlainInfo.isopen)?default(""))?string)="1">checked="checked" </#if> name="exPlainInfo.isopen" value="1"/>是   <input type="radio" <#if (((exPlainInfo.isopen)?default(""))?string)="0">checked="checked" </#if> name="exPlainInfo.isopen" value="0"/>否 </td> </tr> <tr> <td class="list_box1_title2">排序代码:  </td> <td> <input class="ip5" id="sortcode" name="exPlainInfo.sortcode" value="${(exPlainInfo.sortcode)?default("")}"/> </td> </tr> <tr> <td class="list_box1_title2">信息内容:<font color="red">*</font></td> <td> <textarea name="exPlainInfo.content" id="exPlainInfo.content" style="height:450px;width:756px;" >${(exPlainInfo.content)?default("")}</textarea> </td> </tr> <tr> <td colspan="4" align="center"><button onclick="save()" class="ip1">提交</button></td> </tr> </form> </table> <br/><br/><br/><br/> <script language="javascript"> <#if (exPlainInfo.id)?exists> parent.document.getElementById("sitTypeInfoId").disabled="disabled"; <#else> parent.document.getElementById("sitTypeInfoId").onchange=function(){ var sitTypeId=this.options[this.options.selectedIndex].value; document.actionForm.action="exPlainInfo.action?method=edit&exPlainInfo.sittypeid.id="+sitTypeId; document.actionForm.submit(); } </#if> document.getElementsByName("exPlainInfo.sittypeid.id")[0].value=parent.document.getElementById("sitTypeInfoId").value; var textInner=parent.document.getElementById("sitTypeInfoId").options[parent.document.getElementById("sitTypeInfoId").selectedIndex].text; addBar(textInner+' > <b>信息发布</b>'); setMessage('<@getMessage/>'); addBack("<@text name="action.back"/>"); var form = document.actionForm; function save(){ var title=trimRep(document.getElementById("exPlainInfo.title")); if(!(title.value!="" && title.value.length>0)){ alert("请填写信息名称"); title.focus(); return false; } if(title.value.length>120){ alert("信息名称填写内容长度<=120字"); title.focus(); return false; } var sortcode=trimRep(document.getElementById("sortcode")); if(sortcode.value.length>50){ alert("排序代码填写内容长度<=50字"); sortcode.focus(); return false; } var fContent=trim(tinyMCE.get("exPlainInfo.content").getContent()); if(!(fContent!="" && fContent.length>0)){ alert("请填写信息内容。"); fContent.focus(); return false; } if(fContent.length>5000){ alert("信息内容长度<=5000字"); sortcode.focus(); return false; } form.submit(); } </script> </body> <#include "/template/foot.ftl"/>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值