【前言】
上节课中,我们讲解了响应式长度单位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文件夹中(要自己新建这个文件夹)。
图标下载地址: