微信小程序底部导航tabBar以及页面跳转的简单使用

我们经常会看到一些网页的底部下面会有一些固定的导航栏，点击之后就会跳转到相应的界面。例如这些：

那么这些功能都是怎样实现的呢？今天我就一下面的效果图作为例子介绍。

1.在目录 “pages/post” 里面建立一个post.wxml 文件，如图：

2. 同上，在“pages/post/movies”文件夹里面再建立一个movies.wxml 布局文件，如图：

3. 在 app.jion 文件里面进行配置，

   首先要将页面引进来，然后再进行 tabBar 底部导航栏的编程，如下：（看图解释）

参考代码：

{
  "pages":[
    "pages/post/movies/movies",
    "pages/post/post"
  ],
    "window": {
    "navigationBarBackgroundColor": "#405f80"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/post/post",
        "text": "阅读",
        "iconPath":"/images/tab/yuedu.png",
        "selectedIconPath":"/images/tab/yuedu_hl.png"
      },
      {
        "pagePath": "pages/post/movies/movies",
        "text": "电影",
        "iconPath": "/images/tab/dianying.png",
        "selectedIconPath": "/images/tab/dianying_hl.png"
      }
    ]
  }
}

然后就完成啦，如果你的功能还想实现的丰富点的话，请参考：https://developers.weixin.qq.com/miniprogram/dev/

简单粗暴的做法，详细的知识点《微信小程序开发者文档》有，其实就是刚学，记录一下而已

哈哈哈哈欢迎您的阅读，有什么刚好的方式也可以跟我说一下哦，谢谢！