学习笔记--微信小程序简单设置背景颜色

最新推荐文章于 2023-09-08 18:14:14 发布

原创

最新推荐文章于 2023-09-08 18:14:14 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

在这里插入图片描述 1.设置导航栏以下的颜色
在app.awsx添加

 page {
  background-color: #ECC0A8;
}

在这里插入图片描述

2.设置导航栏及以上的颜色
在app.json修改"navigationBarBackgroundColor": “#fff”,

 "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ECC0A8",  
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },

在这里插入图片描述

3.设置下拉颜色刷新的背景颜色
首先设置可以下拉。
在app.json的window中添加 "enablePullDownRefresh": true,
然后再添加backgroundColor： "#FFE4C4"，

附上CSS 颜色名：添加链接描述

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jacka03

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序实战笔记（1）

Regend的博客

02-12

1869

观前提示：笔者是第一次正式接触前后端以及小程序开发的初学者，这篇文章是笔者learn by doing和费曼学习法的产物，可能会有很多谬误和不成熟的解释，希望各位读者能够理性讨论，如果有错误欢迎指出。跳过各种安装等步骤，我们来看看微信小程序是怎么实现的。

web学习笔记（七十三）微信小程序

最新发布

shan33__的博客

07-03

1335

（2） "renderer"和 "rendererOptions"是小程序的渲染配置，如果我们不想使用自带的navigation-bar时需要删除相关配置，此处的渲染配置也需要进行删除操作，否则会产生警告。是用来定义底部导航栏的配置项。底部导航栏（Tab Bar）通常用于在不同页面之间进行快速导航，用户可以通过点击底部的图标或文本切换到不同的页面。（3） "window" 是用来定义小程序的窗口表现的配置项。（1） "pages": [] 用来定义小程序的所有页面路径，默认展示数组第一项的页面。

参与评论您还未登录，请先登录后发表或查看评论

采用微信开发工具开发的一款涂色小程序

12-15

采用微信小程序开发工具开发的一款可填充颜色的小程序。

【微信小程序】设置页面背景色的方式

Pulse的博客

01-25

2万+

微信小程序之设置页面背景色的方式

uni-app小程序设置页面背景色

培根芝士的专栏

04-19

3382

在原生微信小程序中，可以通过下面的设置来设置页面背景色但是在uni-app上，这样的设置在小程序端并没有起作用。原因是因为style标签上加了scoped，那么如何在使用scoped的同时又能设置page背景色呢？

小程序开发——页面背景色设置

菜鸟历程

12-10

1万+

在小程序开发的前期，你可能发现小程序的页面背景色设置总是无法成功，特别是在有列表的页面，下拉或者上拉时，漏出来的地方和原来的背景色不一样。要设置成一样，注意以下两点在 app.json 文件里面的 window 添加 backgroundColor 在 app.wxss 文件里吗添加（注意，page 的前面没有 . ） page { background-color: #efeff4; ...

微信小程序修改标题背景色

贼厉害

02-04

2039

意思就是只要打开当前目录下的 “.json” 文件就可以修改标题上的背景颜色。像这样添加进去就能修改每一个页面标题背景色了。如果发现没有这一项则手动添加。

《微信小程序开发实战》学习笔记chapter1微信小程序人门

Linn908的博客

10-22

1428

《微信小程序开发实战》黑马程序员版本的学习笔记分享。 chapter1微信小程序人门

原生微信小程序开发学习笔记（零基础）

qq_33365152的博客

09-08

532

原生微信小程序开发学习笔记（适合零基础）

微信小程序统一设置所有页面背景色

奋斗的小绿萝

07-30

2万+

app.wxss中的样式属于全局样式，可以在app.wxss中添加如下代码来统一设置所有page的样式。 page { background-color: rgba(250,250,250,0.90); }

微信小程序css篇----背景（Background）与颜色（Color）

热门推荐

鎏嫣宫守护的博客

12-30

14万+

一。背景：background。设置对象的背景特性。一个元素可以设置多重背景图像，每组之间用逗号隔开，如果存在重叠关系，前面的背景图像会覆盖在后面背景图上。 1.background-color：指定背景的颜色。取值：正常的颜色取值。 2.background-image：背景图片。如果设置了这个属性，最好也添加下background-color ，用于当背景image不可见时保持与文

微信小程序之设置所有页面背景颜色

Iterator_1993的博客

01-13

4万+

在app.wxss中使用 page{ background-color:#fff; height:100%; } 这里需要注意的是，page前面没有点。

微信小程序100%背景颜色怎么设置

Fighting社火底子

01-21

2844

页面wxss中 page{ height: 100%; /* 你要设置的高度 */ background-color:#F0F0F0 /* 你要设置的颜色 */ } 结果：

微信小程序设置页面背景色的方式（全局或单页面）

RealizeInnerSelf丶

10-23

1万+

目录全局背景色设置单个页面大概或许可能是自己配置不到位，页面.json 的 window 里配的背景色无效，这里采用了别的方式去实现效果，记录一下自己一机灵想到的解决方式 微信小程序如何修改单页面背景色原来页面.json 里配的是上拉下拉列表是裸露出来的颜色，而不是我们所需要的页面背景色全局背景色设置将每个页面的默认背景色设置成灰色，一次配置，所有页面生效 (适用于...

微信小程序如何设置页面背景颜色宽高100%显示

切图仔

05-25

1万+

很简单只需要给page设置高度就可以了 wxss: page{ height: 100%;/*生效*/ } .container{ width: 100%; height: 100%;/*不生效*/ background:red; }

微信小程序开发——动态修改背景颜色

weixinmp2019的博客

06-10

1万+

动态设置背景颜色全局变量的使用修改背景颜色函数的编写静态设置背影颜色的方式比较简单，只需要在app.wxss中统一设置page样式。 page { background-color: rgba(250,250,250,0.90); } 全局变量的使用然而我们想动态设置背景颜色，即让用户在给定的背景颜色中做出选择。首先通过查阅资料了解到微信小程序是可以设置全局变量的，要在app.js中添加...

微信小程序用CSS设置背景颜色渐变

qq_40829225的博客

05-05

1万+

背景颜色的渐变：核心代码 -webkit-linear-gradient() WXSS的代码： .container{ background-image: url(../../images/flower1.png); position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: -webki...

小程序Vant Weapp中的Cell单元格组件更改样式

前进加油

03-29

4741

vant-weapp更改样式表的方法

微信小程序中这么简单的设置页面背景图及字体颜色的方法，你还不会？

weixin_43730105的博客

04-21

1万+

在微信小程序中，我们不免的要设置背景图片和字体颜色。那怎么样才能做到简单的设置背景图片和字体颜色呢？话不多说，直接开讲首先先说怎么设置页面背景图片：这是博主准备的照片。下面是在wxml中的代码  <view class='test'> <view class="temp">随便写一下</view...

图书馆笔记微信小程序模板源码解析

在了解“图书馆写笔记_微信小程序模板js代码前台前端H5页面源码”这个文件之前，我们首先要清晰微信小程序的开发架构，以及H5页面的基本概念和开发方式。 微信小程序是一种不需要下载安装即可使用的应用，它实现了...