当前位置:主页 > 动态 >

uniapp怎么显示tabbar

时间:2020-12-19 13:00:37

  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编程
 

热点推荐
1 0x049b...5e7d:某巨鲸高杠杆做多1.74万枚E

消息,某巨鲸在HyperLiquid上以20倍杠杆做多17,409枚ETH,清算价为78,008美元同时做多493.4枚BTC,清...

2 广电计量:公司在集成电路检测方面已构

消息,广电计量在5月12日的机构调研中表示,随着人工智能产业化应用加速落地,国产芯片市...

3 嘉信理财正式向零售客户开放加密交易服

消息,吴说获悉,嘉信理财表示,其加密货币交易服务Schwab Crypto已正式向零售客户分批开放。...

4 yzi labs公布easy residency第三期毕业项目名单

消息,吴说获悉,yzi labs公布了其旗舰孵化器easy residency第三期的毕业项目名单。本期项目主要...

5 富国银行显著增加以太坊ETF持仓

消息,富国银行向美国证券交易委员会提交的2026年第一季度13F文件显示,该行显著增加了以太...

6 Kelp DAO与AAVE完成RSETH关键恢复步骤

消息,Kelp DAO和AAVE已完成RSETH的关键恢复步骤,销毁了攻击者的代币,并计划在接下来的两周内...

7 鲸鱼0xc9d购入1500枚ETH,累计购入21800枚

消息,鲸鱼地址0xc9d最近购入1500枚ETH,价值约343万美元。自2月15日以来,该鲸鱼已累计购入2...

8 比特币市场占有率回升至58.5%

消息,比特币市场占有率正从约55%的局部底部回升至目前的约58.5%。历史数据显示,该指标通常...

9 伊朗副总统否认哈尔克岛石油设施漏油

消息,伊朗副总统在当地时间周二表示,伊朗主要石油枢纽哈尔克岛附近海域疑似出现的漏油...

10 韩国4月新增7.4万个就业岗位,创16个月来

消息,韩国统计厅周三公布的数据显示,韩国4月新增就业人数仅为7.4万人,创下16个月以来的...

成都来彰科技 蜀ICP备2025134723号-1

资讯来源互联网,如有版权问题请联系管理员删除。