🔥本文前言:小程序页面设置100%高度还是留白怎么办?像小程序,app开发的时候经常会遇到设置高度,页面颜色的问题,经常出现留白没占满现象,今天专门整了一篇文章,解决这个问题。
页面设置背景色
"pages": {
"navigationBarBackgroundColor": "#32A2FD", // 顶部背景颜色
"navigationBarTitleText": "123456", // 顶部文字
"navigationStyle": "default", // 是否自定义导航栏,当"default"为"custom"时开启自定义头部导航栏选项
"navigationBarTextStyle": "white", // 顶部文字颜色 仅支持 white/black
"enablePullDownRefresh": true, // 开启下拉刷新, 在单个页面设置为"false",在使用页面会覆盖掉当前设置
"backgroundTextStyle":"light" // 下拉背景字体、loading 图的样式,仅支持 dark/light
},
第一种方法:position: fixed; 优点,占满全部不留白,缺点,页面固定不能滑动
box:{
height: 100%;
width: 100%;
background-color: #fff;
position: fixed;
}
第二种,页面高度设置100vh
box:{
height: 100%;
width: 100vh;
background-color: #fff;
}
顺便说下100%和100vh的区别: vh就是当前屏幕可见高度的1%,也就是说 100vh == 100%, 如果当元素没有内容的时候,设置height:100%该元素不会被撑开, 设置height:100vh,该元素会被撑开屏幕高度一致。
💖如果觉得博主的文章有帮到你的话,请👍支持一下博主哦🤞
额外写点其他的,最近小程序用的比较多,三元运算符
表达式1 ? 表达式1为true时的结果 : ( 表达式2 ? 表达式2为true时的结果 : 全都是false的结果 )
if (this[types == 10 ? 'lastPage':(types == 11?'lastPage2':'lastPage3')] && page != 0) return
this[types == 10 ? 'page' :(types == 11?'page2':'page3') ] += page