全局/局部tabBar

需求:底部导航栏
tabBar有两种方式:1.设置全局导航栏，页面变化，导航栏不变。2.设置局部导航栏，随着页面变化而变化
比如导航栏有三个按钮，全局导航栏是设置三个页面，点击一个按钮显示一个页面。
局部导航栏是设置三个页面，每个页面的底部导航栏都一样，是来进行刷新。

全局tabBar

比如导航栏有三个按钮，全局导航栏是设置三个页面，点击一个按钮显示一个页面
优点：便于管理
app.json

  1. "tabBar": {
  2.     "color": "#8c8c8c",
  3.     "selectedColor": "#f4645f",
  4.     "backgroundColor": "white",
  5.     "list": [{
  6.       "pagePath": "pages/index/index",
  7.       "text": "开始"
  8.     }, 
  9.     {
  10.       "pagePath": "pages/aboutwe/index",      
  11.       "text": "分类"
  12.     }
  13.     ],
  14.     "position": "bottom"
  15.   }  
  16. }

局部tabBar

比如三个按钮，局部导航栏是设置三个页面，每个页面的底部导航栏都一样，是来进行刷新
缺点：不好管理

tabBar添加背景图片

iconPath设置的是开始时显示的图标，selectedIconPath是选中时显示的图标
[IconPath可以不写]

  1. list: [
  2.         {
  3.           pagePath: 'pages/index/index',
  4.           iconPath:'assets/6.png',
  5.           selectedIconPath:'assets/6.png',
  6.           text: '首页'
  7.         },

问题和细节

问题

一开始是在dist/app.json内修改的，terminal终端编译后就消失了。
因为所有的程序都是在src内添加的，编译后才能保存在dist，直接在dist内添加是无效的
src/app.js

  1. config = {
  2.     pages: [
  3.       'pages/index/index','pages/user/index','pages/order/index',
  4.       'pages/aboutwe/index','pages/regular/index','pages/information/index',
  5.       'pages/read/index','pages/booklist/index','pages/trueorder/index'],
  6.     window: {
  7.       backgroundTextStyle: 'light',navigationBarBackgroundColor: '#fff',
  8.       navigationBarTitleText: 'WeChat',navigationBarTextStyle: 'black'},
  10.     tabBar: {
  11.       color: '#8c8c8c',selectedColor: '#f4645f',backgroundColor: 'white',
  12.       list: [{
  13.         pagePath: 'pages/index/index',text: '首页'}, 
  14.       {
  15.         pagePath: 'pages/trueorder/index', text: '分类'}],
  16.       position: 'bottom'} }

细节

不深陷程序中，脑海中始终贯彻主线。切记！切记！切记！