tabBar组件和声明式导航

tabBar组件和声明式导航

tabBar 组件的定义

tabBar是用户进行页面选择的组件。

注意在写tabBar时必须要要有两个页面，并且tabBar中的页面在aap.jason中要在前面，就是如下图所示

tabBar组件的实现

// 底部导航栏的配置对象  
"tabBar": {  
    // 底部导航栏的列表项数组  
    "list": [  
        // 第一个导航项  
        {  
            // 当点击时，要打开的页面路径  
            "pagePath": "pages/home/home",  
            // 导航项上显示的文字  
            "text": "首页",  
            // 导航项上显示的图标路径（未选中状态）  
            "iconPath": "Img/雪花.png",  
            // 导航项上显示的图标路径（选中状态）  
            "selectedIconPath": "Img/风力.png"  
        },  
        // 第二个导航项  
        {  
            // 当点击时，要打开的页面路径  
            "pagePath": "pages/message/message",  
            // 导航项上显示的文字  
            "text": "信息",  
            // 导航项上显示的图标路径（未选中状态）  
            "iconPath": "Img/彩虹.png",  
            // 导航项上显示的图标路径（选中状态）  
            "selectedIconPath": "Img/风力.png"  
        }  
    ]  
} 

我们把这些代码放到app.json中，我们看到每一个导航项中的四个属性。

声明式导航

如果是tabBar页面的组件，open-type属性只能选择switchTab

我们在HOME页面的wxml文件中放入以下代码：

<navigator url="/pages/list/list" open-type="navigate">导航到LIST页面</navigator>

我们看到由于导航去的页面不是tabBar页面的组件，所以它的open-type是navigate,而不是switchTab。

通过点击导航到LIST页面这几个字，可以导航到LIST页面。