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

最新推荐文章于 2024-04-23 16:17:39 发布

痴心阿文

最新推荐文章于 2024-04-23 16:17:39 发布

阅读量2.4k

点赞数

分类专栏： CSS 文章标签： css3 html

本文链接：https://blog.csdn.net/zhangxueyou2223/article/details/124881522

版权

CSS 专栏收录该内容

5 篇文章 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