先上效果图,让读者知道这篇文章要干啥:
图1 自定义标题栏效果图
前面的文章,我们已经介绍了如何设置标题,标题的颜色、背景颜色、下拉刷新等内容。今天我们再来学习一下如何设置个性化的标签栏。
1.自定义标签栏
我们前面的文章介绍过,在微信小程序中,可以自定义标题栏的颜色。但是颜色只能为十六进制颜色码,而且用单一的颜色作为标题,显得内容很枯燥。为满足更多用户需求,小程序中给出了一个navigationStyle属性。navigationStyle 仅支持 default/custom。custom 模式可自定义导航栏,只保留右上角胶囊状的按钮。下面我们给出具体的代码:
图2-1 app.json文件代码
图2-2 wxml文件代码
app.json文件中,给出"navigationStyle":"custom"属性:
{"pages":[
"pages/index/index",
"pages/logs/logs"],
"window":{
"backgroundColor": "#29B6EB",
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#f01450",
"navigationBarTextStyle":"white",
"navigationStyle":"custom"},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000},
"debug": true}
.wxml文件:
<view class="container" >
<image src= "图片的地址" mode=widthFix></image>
</view>
给出效果图:
图3-1 效果图1
可以发现给出的效果图与图1不太一样,顶部并没有置顶,还留有空白。如果需要将顶部的空白去掉,需要在.wxml文件中,给最外层的view组件,加上属性style="padding-top:0px",如图所示:
图3-2 .wxml文件代码
效果图:
图3-3 效果图2
2. 底部导航栏
首先给出效果图:
图4 底部导航栏效果图
首先准备素材,在pages目录下新建文件夹images,如图所示:
图5-1 图片素材
具体图片的样式:
图5-2 图片素材
该需要在pages文件下新建一个页面文件(别忘了之前文章中提到过的,新建页面,需要在app.json中配置),如图所示:
图5-3 新建一个页面
新建的页面用于切换展现效果,代码有index页面文件中的代码相类似,这里不再赘述。
代码实现,首先再app.json文件中,需要加上tabBar属性:
图6-1 app.json文件代码构成
{"pages":[
"pages/index/index",
"pages/myself/myself",
"pages/logs/logs"],
"window":{
"backgroundColor": "#29B6EB",
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#f01450",
"navigationBarTextStyle":"black",
"navigationStyle":"custom"},
"tabBar": {
"color": "#aaa",
"selectedColor": "#d33a31",
"borderStyle": "white",
"backgroundColor": "#f8f8f8",
"list": [
{"pagePath": "pages/index/index",
"iconPath": "pages/images/tb1_off.png",
"selectedIconPath": "pages/images/tb1_on.png",
"text": "报名"},
{"pagePath": "pages/myself/myself",
"iconPath": "pages/images/tb3_off.png",
"selectedIconPath": "pages/images/tb3_on.png",
"text": "我的"}]},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000},
"debug": true}
实现的效果图,如图4所示。
总结
本文介绍了自定义标题栏,和底部导航栏,关于导航栏,等后期介绍了自定义组件,我们再学习一下,如何自定义更加酷炫的导航栏。
希望对您的学习有所帮助,谢谢你!