小程序页面设置100%高度还是留白怎么办？

痴心阿文

发布于 2022-11-18 18:39:20

2K00

代码可运行

文章被收录于专栏：痴心阿文的专栏痴心阿文的专栏

运行总次数：0

代码可运行

🔥本文前言：小程序页面设置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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-06-12，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序