---

为了实现从about页面跳转到weekly页的页面之间的链接的点击效果，我们用最简单的方法：用navigator组件实现文本之间的页面跳转。假设我们点击的文本”每周推荐“跳转到weekly，则在about.wxml文件中添加如下代码：

<text>我</text><navigator style="display: inline;" url="/pages/weekly/weekly" hover->每周推荐</navigator><text>一部好片</text>
</view>

接下来我们实现链接文本定义颜色，则上面的代码添加点击颜色和默认颜色，具体的代码如下

<view>
<text>我</text><navigator style="display: inline;" url="/pages/weekly/weekly" hover-class="nav-hover" class="nav-defalut">每周推荐</navigator><text>一部好片</text>
</view>

接下来about.wxss文件中给点击颜色为红色默认颜色为蓝色的样式定义，具体的代码如下：

.nav-hover{
color: blue;
}
.nav-defalut
{
color:red;
}

很多时候，对于about页、weekly页一样的一级页面，我们希望他们能够任意的进行切换，我们可以通过在顶部或底部添加标签栏tabBar来实现。本案例采用的是底部标签tabBar来实现。
假如配置icon图已经添加在/images/icon目录中，全局配置app.json文件中添加标签栏tabBar的实现代码具体如下：

"tabBar": {
    "list": [
      {
        "text": "每日推荐",
        "pagePath": "pages/about/about",
        "iconPath": "/pages/images/home-icon-svg-4.png",
      "selectedIconPath": "/pages/images/home-icon-svg-4.png"
        
      },{
      "pagePath": "pages/weekly/weekly",
      "text": "关于",
      
      "iconPath": "/pages/images/OIP1-C.jpg",
        "selectedIconPath": "/pages/images/OIP1-C.jpg"
    }],
    "color": "#000",
    "selectedColor": "#00f"
    },

---