效果图:
------------------------------------------------------------------------------------------------------
先介绍一下app.json文件
默认有两个代码块:1、pages 这里注册了当前小程序的所有页面路径2、window 这里用于设置小程序的状态栏、导航条、标题、窗口背景色。 以上两个详细使用参考文档,本文章不做介绍
我们看下app.json提供的另一个配置项:tabBar
三、app.json文件配置
1、在pages属性中配置项目所有的页面路径,我们这个例子就两个,home,mine
"pages":[ "pages/home/home", "pages/mine/mine" ]
2、添加tabBar 属性 , 定义一些状态
根据文章前面部分讲解,进行一些必要属性的配置
"tabBar":{ "color": "#333333", "selectedColor": "#ff0000", "backgroundColor": "#fff", "list":[ { "pagePath":"pages/home/home", "text":"主页", "iconPath":"images/home.png", "selectedIconPath":"images/home_selected.png" }, { "pagePath":"pages/mine/mine", "text":"我的", "iconPath": "images/mine.png", "selectedIconPath":"images/mine_selected.png" } ] }
四、单独页面的配置
一个页面包含js、hson、wxml、wxss等相关文件。
这里不再多具体介绍,只添加一个小需求,点击tab切换相关页面,该页面标题要和tab一致,页面内容也和tab一致,用于说明tab效果正确实现。
1、设置单独页面的页面标题,这个需求是在json文件中配置实现的。
主需要在单独页面路径下的json文件中添加属性:
以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注!