为了账号安全,请及时绑定邮箱和手机立即绑定

小程序tabbar实现底部tab导航栏

标签:
WebApp

一节带领大家实现了网络数据的获取并填充到首页列表,但是我们的小程序肯定不能仅仅只有首页一个页面,我们这节就来学习使用tabbar实现底部导航栏,进而实现个人中心页。同样我们这节的代码是基于第三天代码开发的。如果没有看过前3天视频的同学,点击上面链接去看前3天视频。

本节知识点

  • 1,认识tabbar

  • 2,实现底部导航栏

先看下本节实现的效果图


webp

tabbar导航栏.gif

接下来开始讲解实现步骤

一,创建个人中心页

大家还记得怎么创建新页面吧。

  • 1,在pages里创建me文件夹

  • 2,在新创建的me文件夹里创建me.wxml,me.js,me.wxss文件

  • 3,在app.json里注册个人中心页面。
    下面贴出来图解


    webp

    1-创建me.png

webp

注册页面.png

二,学习tabbar,并用tabbar实现底部导航栏

老规矩,我们学习新组件,一定要先看官方文档,官方文档永远是最好的老师

官方文档链接:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

webp

官方文档


可以看到,我们要想用tabbar实现底部导航栏,就至少要有两个页面,这也是一开始我们创建me(个人中心页面的原因)


我们的tabbar使用官方也有给出简单示例

webp

官方示例

我们就把官方示例代码复制到我们的app.json(tabbar也是在app.json里注册使用的)


webp

image.png

这样我们就把tabbar注册到app.json里了。
这样我们就实现了下面效果


webp



作者:java小石头
链接:https://www.jianshu.com/p/4acaf968aabf


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消