微信小程序之tab的实现（附源码和效果图）

tab功能的实现需要在项目根目录下app.json文件中配置,创建tab时，需要准备相应的图标文件和新建对应的页面，然后就可以在对应页面中写项目原型了。下面是一个简单的tab实现，直接可以拷贝到项目中使用，没有多余的代码。

效果图：

tab.png

示例代码：

"tabBar": {
    "selectedColor": "#20B3AD",
    "color": "#999",
    "borderStyle": "white",
    "backgroundColor": "#F0F0F0",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/home.png",
        "selectedIconPath": "images/homeSelected.png",
        "text": "首页"
      },
      {
        "text": "租赁",
        "pagePath": "pages/lease/lease",
        "iconPath": "images/lease.png",
        "selectedIconPath": "images/leaseSelected.png"
      },
      {
        "text": "预售",
        "pagePath": "pages/sale/sale",
        "iconPath": "images/sale.png",
        "selectedIconPath": "images/saleSelected.png"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "images/mine.png",
        "selectedIconPath": "images/mineSelected.png",
        "text": "我的"
      }
    ]
  }

GitHub源代码及下载地址：tab功能实现

其它文章请访问：

• 微信小程序之自定义组件
• 微信小程序之根据经纬度反查地址
• 微信小程序之转发功能（附效果图和源码）
• 微信小程序之轮播图的实现（附效果图和源码）
• 微信小程序之tab的实现（附源代码和效果图）
• 微信小程序之多列表的显示和隐藏功能（附源码）