【uniapp微信小程序】自定义导航栏:非首页展示的实现方式(极为快捷方式)

先看效果展示:

在这里插入图片描述

如何快速实现我们这种特定的需求呢?请各位继续往下阅读。

一、目前存在的问题

我们都知道,目前小程序中的tabBar仅支持在pages.json配置文件中,以配置的方式进行实现。如图所示。
在这里插入图片描述
如果是按照这种形式,我们是无法实现在特定页面进行类似tabBar这种功能的实现的。

那么,这种情况下,我们该如何解决?
在以前开发过程中,很多程序员都需要自己去编写一个自定义的组件,来模拟实现tabBar类似的功能需求。由于每个人的水准不一样,最终实现的结果,写的代码质量也是不一样的。

比如说,现在我们需要这样类似tabBar的一个自定义组件,我们就需要去百度查找,参考别人的代码,然后去搭建环境分析、调试,直到成功,然后再引入到自己的项目中。

我相信,你一定会跟我一样,太崩溃了。

然后,我们再进一步,现在有没有快速的实现方式呢?

如果你看到我这篇文章,请你相信,那是一定有的。

疑问:::
如何在非首页中引入tabBar功能的底部导航栏,还是那种快速、简洁的方式??

Answer
那就是引入uView中的Tabbar底部导航栏。

如图所示:
在这里插入图片描述

二、使用方法

第一步::引入uView这个uni-app的UI组件库。
在这里插入图片描述
具体如何引入,这里我们不做过多的介绍,大家可以参考uView的官方网站。

第二步::在uView组件库中,找到这个Tabbar底部导航栏。

在这里插入图片描述
第三步:使用,即在你需要用的任何页面进行编码。如图所示:
在这里插入图片描述
最后的展示效果如图:
在这里插入图片描述
当然,uView中给我们提供了好多样式的tabbar。能满足绝大多数的需求。

你喜欢么?

如果该文章对你有用的话,请你及时关注博主、点赞、收藏。

后续博主会不定期分享用到的好东西,来提升编程能力。

感谢支持!!!

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ai安歌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值