⼩程序设置页⾯背景⾊的⽅式(全局或单页⾯)
⽬录
⼤概或许可能是⾃⼰配置不到位,页⾯.json 的 window ⾥配的背景⾊⽆效,这⾥采⽤了别的⽅式去实现效果,记录⼀下⾃⼰⼀机灵想到的解决⽅式
原来页⾯.json ⾥配的是上拉下拉列表是裸露出来的颜⾊,⽽不是我们所需要的页⾯背景⾊
H3全局背景⾊设置
将每个页⾯的默认背景⾊设置成灰⾊,⼀次配置,所有页⾯⽣效
(适⽤于⼤多数页⾯背景颜⾊⼀致的情况,特殊页⾯单独设置即可)
其他页⾯是默认继承过去的背景⾊,你不设置⽤的就是这⾥设置的
app.wxss
/**app.wxss**/
page {
background-color: rgb(245, 245, 245);
}
H3单个页⾯
xxxx.wxss
同上,可以直接设置页⾯⾥ page 的样式
/**index.wxss**/
page {
background-color: teal;
}
当然,也可以采⽤下⾯这种⽅式
单个页⾯最外层包个<view class="pageContainer"></view>作为根容器,来设置样式,给定背景⾊
怎么设置主题背景
关键点min-height: 100vh;:页⾯最低⾼度100%屏幕⾼度
内容不⾜⼀屏时,pageContainer ⾼度就是100%屏幕⾼度
内容超过⼀屏时,内容有多⾼,pageContainer 就有多⾼
/**index.wxss**/
.pageContainer{
min-height: 100vh;
background-color: rgb(245, 245, 245);
}