uniapp显示tabbar的方法:首先在pages数组中第一项表示应用启动页;然后在【page.js】文件里面进行配置,代码为【path : pages/show/show,style : {navigationbart】。
本教程操作环境: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里面配置两个页面的时候一直不显示,配置三个页面就成功了,不知道你们有没有遇到这个问题
好了,配置成功,效果图如下
相关免费学习推荐:php编程(视频)
以上就是uniapp怎么显示tabbar的详细内容。