navigator组件

• text元素内只能包含纯文本
• 颜色设置会相互覆盖(wxss中后者会覆盖前者，wxml中会覆盖wxss的)

<!-- view  容器元素控制其内元素 -->
<view class="container">
  <image class="about-banner" src="/images/about.jpg"></image>
  <text style="font-weight:bold;font-size:60rpx;">电影周周看</text>
  <!-- navigator类似a，display:inline;将其变为与inline元素  hover-class添加点击时效果-->
  <!-- navigator中 open-type="redirect" 重定向（去除左上角的返回）默认navigate可返回的跳转页面 -->
  <view>
     <text>我</text>
     <navigator class='nav-default' style='display:inline;' url='/pages/weekly/weekly'  hover-class='nav-hover'>每周推荐</navigator>
     <text>一部好片</text>
  </view>
  <text>我的微博weibo.com/simbasong</text>
</view>

/* 默认颜色 */
.nav-default {
  color:green;
}
/* 点击态要位于默认态之后 */
.nav-hover {
  color:red;
}

在这里插入图片描述

底部导航

• tabBar 底部导航
• color selectedColor设置默认及选中时字体颜色
  app.json

{
  "pages":[
    "pages/about/about",
    "pages/weekly/weekly"
  ],
  "tabBar": {
    "list":[
      {
        "text": "每周推荐",
        "pagePath": "pages/weekly/weekly",
        "iconPath": "images/icons/weekly.png",
        "selectedIconPath": "images/icons/weekly-selected.png"
      },
      {
        "text": "关于",
        "pagePath": "pages/about/about",
        "iconPath": "images/icons/about.png",
        "selectedIconPath": "images/icons/about-selected.png"
      }
    ],
    "color":"#000",
    "selectedColor":"#00f" 
    
  }

}

在这里插入图片描述

注：navigator 无法点击 用 open-type='switchTab'

统一设置顶部导航栏

app.json

"window": {
    "navigationBarBackgroundColor":"#fff",
    "navigationBarTextStyle":"black"
  }

图标
领取限量云产品优惠