⼩程序⾃定义底部tabbar 1.实现效果
效果图
2.实现原理
⾃定义tabBar开放⽂档
3.实现步骤
1.在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。
2.在代码根⽬录下添加⼊⼝⽂件
图2
3. 编写 tabBar 代码
⽤⾃定义组件的⽅式编写即可，该⾃定义组件完全接管 tabBar 的渲染。另外，⾃定义组件新增 getTabBar 接⼝，可获取当前页⾯下的⾃定义tabBar 组件实例。
4.The last but the most important
要在这些⾃定义tabbar页的onShow中调⽤以下代码：
onShow() {
//⾃定义的tabbar
if (TabBar === 'function' &&
selected: 1
})
}
},
4.完整代码（更多代码请移⾄码云）
5.部分代码
Component({
data: {
selected: 0,
color: "#333333",
selectediconpath什么意思
selectedColor: "#6B1F72",
list: [{
pagePath: "/pages/cal/index",
iconPath: "/img/tabbar/icon_index.png",
selectedIconPath: "/img/tabbar/icon_index_sel.png",
text: "⾸页"
}, {
pagePath: "/pages/charts/index",
iconPath: "/img/tabbar/icon_order.png",
selectedIconPath: "/img/tabbar/icon_order_sel.png",
text: "饼图"
}, {
pagePath: "/pages/addImg/index",
iconPath: "/img/tabbar/icon_safe.png",
selectedIconPath: "/img/tabbar/icon_safe_sel.png",
text: "上传图⽚"
}, {
pagePath: "/pages/sendCode/index2",
iconPath: "/img/tabbar/icon_my.png",
selectedIconPath: "/img/tabbar/icon_my_sel.png",      text: "验证码"
}]
},
attached() {
},
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
wx.switchTab({url})
this.setData({
selected: data.index
})
}
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。