首页 > web前端 > uni-app > uniapp怎么显示tabbar

uniapp怎么显示tabbar

coldplay.xixi
发布: 2020-12-17 10:22:14
原创
11144 人浏览过

uniapp显示tabbar的方法:首先在pages数组中第一项表示应用启动页;然后在【page.js】文件里面进行配置,代码为【"path" : "pages/show/show","style" : {"navigationBarT】。

uniapp怎么显示tabbar

本教程操作环境:windows7系统、uni-app2.5.1版本,该方法适用于所有品牌电脑。

推荐(免费):uni-app开发教程

uniapp显示tabbar的方法:

一,看官网,了解tabBar

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。

  • 当设置 position 为 top 时,将不会显示 icon

  • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

  • tabbar 切换第一次加载时可能渲染不及时,可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花(hello uni-app使用了此方式)

  • tabbar 的页面展现过一次后就保留在内存中,再次切换 tabbar 页面,只会触发每个页面的onShow,不会再触发onLoad。

  • 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话,建议不使用 tabbar 的顶部设置,而是自己做顶部选项卡,可参考 hello uni-app->模板->顶部选项卡。

二,在page.js文件里面配置

{
"pages": [ //pages数组中第一项表示应用启动页,
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
    ,{
            "path" : "pages/show/show",
            "style" : {
"navigationBarTitleText": "show"
}
        }
        ,{
            "path" : "pages/component/component",
            "style" : {
"navigationBarTitleText": "component"
}
        }
    ],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
    "color": "#F0AD4E",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#F8F8F8",
    "list": [{
        "pagePath": "pages/index/index",
        "iconPath": "static/logo.png",
        "selectedIconPath": "static/logo.png",
        "text": "首页"
    },{
        "pagePath": "pages/component/component",
        "iconPath": "static/logo.png",
        "selectedIconPath": "static/logo.png",
        "text": "组件"
    }, {
        "pagePath": "pages/show/show",
      "iconPath": "static/logo.png",
      "selectedIconPath": "static/logo.png",
        "text": "展示"
    }]
} 
}
登录后复制

 刚开始不知道为什么我在"tabBar"里面配置两个页面的时候一直不显示,配置三个页面就成功了,不知道你们有没有遇到这个问题

好了,配置成功,效果图如下

01e11dc86e3d6caf1e106ad02a39c1a.png

相关免费学习推荐:php编程(视频)

以上是uniapp怎么显示tabbar的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板