实例-0基础微信小程序开发入门1.5-【全局导航样式栏、tabBar】

【前言】

上节课中，我们讲解了响应式长度单位rpx，也初步设置了一个新的页面：weekly页（每周推荐页面），接下来，我们将在这个新的页面中讲解更多东西。

【全局导航样式栏】

在上一节课中，我们输入完最后的代码，编译后出现了一个新的页面——每周推荐页，但我们发现了一个问题：之前的about页的导航栏是白底黑字的，而此时的每周推荐的导航栏则是黑底白字的，我们如果要统一风格，该怎么办呢？

大家最容易想到的方法应该是把配置about页面的样式复制一份，再配置到每周推荐的json文件上进行配置，的确，这是个可行的方法，但是我们要考虑这样一个问题，如果我们有几十个页面，难道每个页面都要像这样复制一遍吗？如果我想修改每个页面的字体大小、背景颜色等等，是不是得改几十次呢？

其实，我们有更加方便的方法：在全局设置中进行配置：

app.json：

{

"pages":[

"pages/weekly/weekly",

"pages/about/about"

],

"window":{

"navigationBarBackgroundColor":"#fff",

"navigationBarTextStyle":"black"

}

}

此处，我们app.json中的window属性中进行白底黑字的配置，编译后我们发现weekly页面的导航栏也变成白底黑字了，说明我们的配置是有效的。

当然，如果说我们想把某个页面的导航栏的字体变大，那么我们可以单独对那个页面进行设置，也就是说，如果某个页面的那个属性拥有自己单独的配置，它将不再使用全局变量中对其的配置。

【举个例子：】

app.json：（我们在window属性中加入标题“电影周周看”）

"window":{

"navigationBarBackgroundColor":"#fff",

"navigationBarTextStyle":"black",

    "navigationBarTitleText":"电影周周看"

}

编译后我们发现weekly页面的标题并没有变化，仍为“每周推荐”，而当我们把weekly.json中的标题属性删去，编译后我们发现，weekly页面的标题变为了“电影周周看”。

好，全局导航样式栏的介绍就到这里，接下里我们对每周推荐的页面进行具体的配置。（此处先把刚刚删去的weekly页中的标题补回去）

weekly.json：

{

"navigationBarTitleText": "每周推荐"

}

【weekly页面配置】

weekly.wxml：

<view class='container'>

<text>本周推荐</text>

<image src='https://qidian.qpic.cn/qdbimg/349573/1115277/180' ></image>

<text>斗罗大陆</text>

<text>心潮澎湃，无限幻想，迎风挥击千层浪，少年不败热血！</text>

</view>

weekly.wxss：（注意，此处的container我们虽然在about.wxss中配置过，但因为一个wxss对应一个wxml，about页的wxss没办法对应weekly的wxml，所以我们必须将about.wxss中的container拷贝过来。）

.container{

background-color:#eee; /*设置背景颜色*/

height:100vh; /*设置该容器的高度为页面的100%*/

display: flex; /*将该容器变成flex-container*/

flex-direction: column; /*将页面布局从横向(默认)改为纵向*/

justify-content: space-around;/*使容器内各部分均等分割*/

align-items: center; /*设置水平居中*/

}

 

 

 

编译后，效果如上图。

【tabBar】

前面我们讲过在app.json中直接修改pages属性中的第一个路径，来暂时性地显示我们要的每周推荐页面，但实际应用中，我们总需要在页面下方加一个底部导航方便主页面间进行跳转。

效果图如下：

这里呢，我们需要先自行搜索一些合适的图标，在文章末尾我也会把所用图标贴出来。

【代码】

app.json：（注意，此处新增的tabBar是与pages和window并列的）

{

"pages":[

"pages/about/about",

"pages/weekly/weekly"

],

"tabBar":{

"list":[

{

"text": "每周推荐",

"pagePath": "pages/weekly/weekly",

"iconPath": "images/icons/read.png",

"selectedIconPath": "images/icons/read_active.png"

},

{

"text": "关于",

"pagePath": "pages/about/about",

"iconPath": "images/icons/people.png",

"selectedIconPath": "images/icons/people_active.png"

}

],

"color":"#000",

"selectedColor":"green"

},

"window":{

"navigationBarBackgroundColor":"#fff",

"navigationBarTextStyle":"black",

"navigationBarTitleText":"电影周周看"

}

}

代码详解：

我们只看tabBar部分，list中，每个{}内为一个底部导航，我们这里总共设置了两个，一个跳转到关于页面，一个跳转到每周推荐页面。

对于list中的一个{

    text为文字；pagePath为页面路径；iconPath为图标路径；这里要注意，selectedIconPath是被选中后的图片，而

iconPath是选中前的图片。

}

下方与list并列的“color”是选中前的颜色，我们设置为了黑色，而选中后的字体颜色“selectedColor”我们则设置为了绿色。

此处我们要将准备好的四个图标命好名字，然后打开硬盘拷贝到images文件夹的icons文件夹中（要自己新建这个文件夹）。

图标下载地址：

链接：https://pan.baidu.com/s/1PuF2m4m_pZVo4HwnPwBWWQ 密码：3wxo