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里写数据