绝大部分的项目都需要tabbar,tabbar就是我们进入小程序或者app后看到的底部导航栏。uniapp设置tabbar的格式和微信小程序基本一样。
我们首先在pages文件夹中,新建三个页面,因为我们一会儿要设置4个tabbar,页面要提前注册好。
我们然后进去pages.json,在pages属性下,把刚才新建的三个页面注册一下,并且写一下他们的顶部导航栏的文字
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path":"pages/classify/classify",
"style": {
"navigationBarTitleText": "分类"
}
},
{
"path":"pages/shoppingCar/shoppingCar",
"style": {
"navigationBarTitleText": "购物车"
}
},
{
"path":"pages/me/me",
"style": {
"navigationBarTitleText": "个人中心"
}
}
],
然后写一个和globalStyle同级的属性,tabbar,记得写双引号,然后写一个list属性,list里存放的就是tabbar页面的相关信息。
我们首先先找一些底部导航栏相关的logo放到项目里的一个文件夹里,我放到了static里面。
"tabBar":{
"list":[
{
"iconPath":"static/home.png",
"selectedIconPath":"static/home_fill.png",
"pagePath":"pages/index/index",
"text":"首页"
},
{
"iconPath":"static/classify.png",
"selectedIconPath":"static/classify_fill.png",
"pagePath":"pages/classify/classify",
"text":"分类"
},
{
"iconPath":"static/shopping.png",
"selectedIconPath":"static/shopping_fill.png",
"pagePath":"pages/shoppingCar/shoppingCar",
"text":"购物车"
},
{
"iconPath":"static/me.png",
"selectedIconPath":"static/me_fill.png",
"pagePath":"pages/me/me",
"text":"个人中心"
}
],
"color":"#333333",
"selectedColor":"#4CD964"
}
list数组里面的每个{}包住的都是一个页面的信息,iconPath是未被选中的tabbar的logo,selectIconPath是选中后的tabbar的logo,pagePath是页面的路径,text是tabbar显示的文字。list数组外的color和selectColor顾名思义就是tabbar未被选中的文字颜色和选中后的文字颜色。
和微信小程序的几乎是一模一样。
然后我们在H5端运行一下项目:
一点问题没有,灰常的nice。