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

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

效果图：

示例代码：

"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功能实现

转载于:https://www.cnblogs.com/YYW303/p/9427819.html