uni-app实现底部导航

本文介绍了如何在uni-app中实现底部导航,包括使用uni-app自带组件、创建中间带加号的导航以及自定义导航的实现方法。在实践中,作者遇到了一些问题,如底部导航在非启动页不显示,以及组件化加载导致的子页面生命周期函数无法正常工作。通过查阅文档和不断尝试,作者找到了解决方案,并分享了这些经验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

uni-app实现底部导航

在做的过程中会先把自己用到的方法,和自己认为可以优化的地方先记录下来。
优化和补充会在后期进行补充

1. 使用uni-app自带组件实现底部导航功能

今天想把小程序开发完。在实现底部导航的时候,先去看了一下模板源码
发现应该是在pages.json中用tabbar组件
在这里插入图片描述
然而并没有效果显示

  1. ok.去uni-app官网看一下这个组件具体应该怎么使用
    看了就是上面这段代码
  2. 如下图,要将带tabbar的页面配置为首页
    在这里插入图片描述
    将跳转页设为首页,效果出现!在这里插入图片描述
    那么在后面做的过程中,如果不把这个页面设置为启动页还能够出现吗?-- 应该不行

2. 使用uni-app实现中间带加号的底部导航功能

3. 使用uni-app实现自定义底部导航功能

最近的小程序到了收尾工作,然而更大的麻烦出现了。
一开始是仿照colorUI中的方式,组件化将tab对应页面装进去,点击哪个显示哪个页面
我自己认为这个方法肯定是最好的了。而且也不用再在pages.json里吭哧吭哧的写
但因为是组件化加载。其实页面永远停留在父页面,用

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值