全局导航栏样式设置在微信小程序项目中的应用
全局导航栏样式设置在微信小程序项目的app.json中对全局的页面配置进行设置，json中有一项配置window可设置上方导航栏的属性，在json文件中写上window，按table键补全即会出现navigationBar的各项属性，如下
<p><pre class="prettyprint"> <code class=" hljs bash"><span class="hljs-string">"window"</span>: {
<span class="hljs-string">"navigationBarBackgroundColor"</span>: <span class="hljs-string">"#000000"</span>,
<span class="hljs-string">"navigationBarTextStyle"</span>: <span class="hljs-string">"white"</span>,
<span class="hljs-string">"navigationBarTitleText"</span>: <span class="hljs-string">"About"</span>,
<span class="hljs-string">"backgroundColor"</span>: <span class="hljs-string">"#eeeeee"</span>,
<span class="hljs-string">"backgroundTextStyle"</span>: <span class="hljs-string">"dark"</span>,
<span class="hljs-string">"enablePullDownRefresh"</span>: <span class="hljs-literal">true</span>
} </code></pre></p>
查阅微信开发者简易教程可知，以上各项属性的作用分别为背景颜色，字体颜色，导航栏标题，页面的背景颜色，下拉刷新时字体样式（只有dark和light两种选择），是否允许下拉刷新。在app.json文件中进行的配置均是针对全局的，即所有的页面都将应用这样的属性，如果在一个单独页面的json文件中单独进行配置，则其配置会将app.json中的配置覆盖。
2. 页面弹性盒子布局
弹性盒子是一种应用于容器的类（微信小程序中的view），可以快速对页面的布局进行配置，首先在wxml文件中为页面添加需要展示的内容，示例如下
<p><pre class="prettyprint"> <code class=" hljs vbnet"><image <span class="hljs-keyword">class</span> = <span class="hljs-string">"picture"</span> src= <span class="hljs-comment">'/images/movie.jpg'><span class="hljs-xmlDocTag"></image></span></span>
<<span class="hljs-keyword">text</span>>电影周周看</<span class="hljs-keyword">text</span>>
<<span class="hljs-keyword">text</span>>我每周推荐一部好电影</<span class="hljs-keyword">text</span>></code></pre></p>
http://www.qianxianly.com/data/attachment/forum/20221201/1669888813383_1.jpg
添加了一张图片和两个text文字组件。此时显示出来的页面是挤在一起的。定义一个view容器将这些内容放进去
<p><pre class="prettyprint"> <code class=" hljs vbnet"><view <span class="hljs-keyword">class</span> = <span class="hljs-string">"container"</span>>
<image <span class="hljs-keyword">class</span> = <span class="hljs-string">"picture"</span> src= <span class="hljs-comment">'/images/movie.jpg'><span class="hljs-xmlDocTag"></image></span></span>
<<span class="hljs-keyword">text</span>>电影周周看</<span class="hljs-keyword">text</span>>
<<span class="hljs-keyword">text</span>>我每周推荐一部好电影</<span class="hljs-keyword">text</span>>
</view></code></pre></p>
view所属的类为container，在wxss中定义这个类的样式，如下
<p><pre class="prettyprint"> <code class=" hljs css"><span class="hljs-class">.container</span><span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-string">"#eeeeee"</span></span></span>;
<span class="hljs-rule"><span class="hljs-attribute">align-items</span>:<span class="hljs-value"> center</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"><span class="hljs-number">100</span>vh</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value">flex</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">flex-direction</span>:<span class="hljs-value"> column</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">justify-content</span>:<span class="hljs-value"> space-around</span></span>;
<span class="hljs-rule">}</span></span></code></pre></p>
其中定义了这个容器的内容的背景颜色和其对齐方式，以及这个容器在整个窗口中所占的高度（vh为比例单位，100vh代表全部高度），将display属性设置为flex表示启用弹性盒子布局，选择其方向为column（垂直方向），可选row（水平方向）以及它们的reverse（如column-reverse），将justify-content属性设置为space-around代表让所有的内容均匀分布。
页:
[1]