小程序之寄快递底部TABBAR设计案例

效果图：

 

1，app.js文件 App（{}）完成小程序注册。

2,建立pages目录，下再建index目录，jikuaidi目录，mine目录

3，目录下新建Componet

2，app.json文件

{

“pages”:[

"pages/index/index",

"pages/jikuaidi/jikuaidi",

"pages/mine/mine"//完成三个页面的路径配置。

]，

"windows":{"navigationBarBackgroundColor"::"#3481EB",

"navigationBarTitleText":"快递查询",//所有页面的导航标题。

}

"tabbar":{

"selectedColor":"选中文字的颜色",

"list"[

{"text":"查快递"，//底部菜单文字

"pagePath":"pages/index/index",//底部菜单对应的页面

"iconPath":"res/images/search.png",//底部图标来源

"selectedIconPath":"res/images/search_select.png"//选中后图标来源。

}

{

第二组

}

{

第三组

}

]

}

}