小程序怎样实现主页的tab选项功能-创新互联

这篇文章将为大家详细讲解有关小程序怎样实现主页的tab选项功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联是一家专业从事做网站、成都网站建设、网页设计的品牌网络公司。如今是成都地区具影响力的网站设计公司,作为专业的成都网站建设公司,成都创新互联依托强大的技术实力、以及多年的网站运营经验,为您提供专业的成都网站建设、营销型网站建设及网站设计开发服务！

效果图：

小程序怎样实现主页的tab选项功能

实现底部Tab选项，只需要在项目根目录下的app.json下修改

如图：

小程序怎样实现主页的tab选项功能

------------------------------------------------------------------------------------------------------

先介绍一下app.json文件

默认有两个代码块：1、pages
这里注册了当前小程序的所有页面路径2、window
这里用于设置小程序的状态栏、导航条、标题、窗口背景色。

以上两个详细使用参考文档，本文章不做介绍

我们看下app.json提供的另一个配置项：tabBar

小程序怎样实现主页的tab选项功能

tabBar提供一些公有的属性对tab配置：

小程序怎样实现主页的tab选项功能而针对每一个单独的tab 也有一些属性进行配置：

小程序怎样实现主页的tab选项功能官方示意图：

小程序怎样实现主页的tab选项功能

具体实现底部Tab功能：

设定一个需求，假设当前我们有两个tab,一个'主页'，一个'我的' ，未选中灰黑色，选择红色。

一、在pages目录下创建两个目录，并创建想要的js、json、wxml、wxss相关文件

名字随意，这里举例：home目录（主页Tab相关），mine目录(我的Tab相关)

小程序怎样实现主页的tab选项功能

二、在根目录下新建一个目录，取名images(随意取)，用于存放图片，这里tab需要使用

1、在阿里素材库下载几个，注意tab图片需要下载点击和未点击两种状态下的图片。

2、讲图片资源复制到自己建的用于存图片的目录下

小程序怎样实现主页的tab选项功能

三、app.json文件配置

1、在pages属性中配置项目所有的页面路径，我们这个例子就两个，home,mine

"pages":[    "pages/home/home",    "pages/mine/mine"
  ]

2、添加tabBar 属性，定义一些状态

根据文章前面部分讲解，进行一些必要属性的配置

"tabBar":{
    "color": "#333333",
    "selectedColor": "#ff0000",
    "backgroundColor": "#fff",
    "list":[
      {
        "pagePath":"pages/home/home",
        "text":"主页",
        "iconPath":"images/home.png",
        "selectedIconPath":"images/home_selected.png"
        
      },
      {
        "pagePath":"pages/mine/mine",
        "text":"我的",
        "iconPath": "images/mine.png",
        "selectedIconPath":"images/mine_selected.png"
      }
    ]
  }

四、单独页面的配置

一个页面包含js、hson、wxml、wxss等相关文件。

这里不再多具体介绍，只添加一个小需求，点击tab切换相关页面，该页面标题要和tab一致，页面内容也和tab一致，用于说明tab效果正确实现。

1、设置单独页面的页面标题，这个需求是在json文件中配置实现的。

　主需要在单独页面路径下的json文件中添加属性：

小程序怎样实现主页的tab选项功能