自定义tarber

1先官网代码 预览 在小程序开发工具中片段修改好
(1)app.json

//1
 "pages": [
    "index/index",
    "index/index2",
    "index/index3"
  ],
//2
"tabBar": {
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "index/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "组件"
      },
      {
        "pagePath": "index/index2",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "接口"
      },
      {
        "pagePath": "index/index3",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "个人中心"
      }
    ]
  },

(2)custom-tab-bar 下 index.js

 list: [{
      pagePath: "/index/index",
      iconPath: "/image/icon_component.png",
      selectedIconPath: "/image/icon_component_HL.png",
      text: "组件"
    }, {
      pagePath: "/index/index2",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "接口"
    }, {
      pagePath: "/index/index3",
      iconPath: "/image/icon_API.png",
      selectedIconPath: "/image/icon_API_HL.png",
      text: "个人中心"
    }]

和json保持同步
(3)custom-tab-bar 下 index.wxml



  
  
  
    
    {{item.text}}
  



(4)custom-tab-bar 下 index.wxss

/* 控制 第二个tabber 升起来 变大 */
.casd{
  position: fixed;
  bottom: 40rpx;
  height: 150rpx !important;
  width: 150rpx !important;
}
/* 控制 第二个tabber字体 */
.text{
  margin-top: 60rpx;
}

2 然后打开你的项目
(1)把custom-tab-bar拷贝到miniprogram项目里
(2)把index文件夹拷贝到miniprogram项目里
(3)改app.json 里的tabber也拷贝覆盖
"pages": [ "index/index", "index/index2", "index/index3" ],
添加上面3个
(4) 查看效果 添加新的编译 index/index
(5) index index1 index2 就是主页面 代码页面写里面 js 写在js里
```
Component({
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 0
})
}
}
},
methods:{

                          },
                  data:{

                   }
                })
 ```
              methods里写函数
              data里写数据

你可能感兴趣的:(自定义tarber)