4、navigator 组件使用，导航栏tabBar配置

admin

链接导航 navigator 组件及open-type、hover-class属性与导航栏tabBar配置使用

一、链接导航 navigator 组件及open-type、hover-class属性使用
about.wxml
  <view>
  <text>hello world </text>
  <navigator url="/pages/weekly/weekly" style="display:inline;" open-type="redirect" hover-class="nav_hover" class="nav_default">weekly</navigator>
  </view>

about.wxss
.nav_default{
  color: blue;
}
.nav_hover{
  color: red;
}

hover-class="nav_hover"   //点击时样式
class="nav_default"  //默认样式
注：根据CSS3中的麒麟算法，当两个CSS样式属性发生冲突的时候，因为这两个样式属性特质相同的，谁在后面定义谁的属性取值就会胜出，所以前后顺序要做调整。

open-type="redirect"   //不可返回，即导航栏不会出现返回功能
open-type="navigate"   //可返回,默认
open-type="switchTab"  //navigator与tabBar 同时可链接时，需要将open-type的属性设为switchTab，否则navigator点击不可用

文档：https://developers.weixin.qq.com ... nent/navigator.html

二、配置tabBar的方法
app.json
{
  "pages": [
    "pages/about/about","pages/weekly/weekly"
  ],
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "list": [{
      "pagePath": "pages/about/about",
      "text": "ABOUT",
      "iconPath": "images/icons/1.png",
      "selectedIconPath": "images/icons/3.png"
    },
    {
      "pagePath": "pages/weekly/weekly",
      "text": "WEEKLY",
      "iconPath": "images/icons/2.png",
      "selectedIconPath": "images/icons/4.png"}]，
      "color": "#000",
      "selectedColor": "#ff0000"
  }
}

tabBar属性
list：tabBar上的属性设置（数组：pagePath、text、iconPath、selectedIconPath）tabBar中list的个数最少2个，最多5个
color：tabBar上的文字默认颜色
selectedColor：tabBar上的文字选中时的颜色
文档：https://developers.weixin.qq.com ... ion/app.html#tabBar

weekly.wxml
<view class="content">
  <image src="../../images/2.png" class="img_banner"></image>
  <view>
  <text>hello world </text>
  <navigator url="/pages/weekly/weekly" style="display:inline;" open-type="switchTab" hover-class="nav_hover" class="nav_default">weekly</navigator>
  </view>
  <image src="http://bbs.bixingcms.com/data/attachment/forum/202002/21/192934puqrqnnunn0xk0km.png"></image>
  <text>wechat</text>
  <image src="/images/3.png"></image>
</view>

open-type="switchTab"//navigator与tabBar 同时可链接时，需要将open-type的属性设为switchTab，否则点击navigater无效。


三、顶部导航栏样式全局配置,避免每个页面重复配置，出现混乱。
weekly.json
{
    "navigationBarTitleText": "WEEKLY",  //当前页标题
}

app.json
"window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "小程序", //全局默认标题
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  }