- 小程序中有
tabBar页面与应用内页面（其实就是除去tabBar页面之外的页面），tabBar页面从表面来说就是页面中含有tabBar切换组件的页面，从小程序代码里讲就是在app.json里配置了tarBar选项的页面。 - 目前有原生
tabBar，还有官方的自定义tabBar。 - 原生
tabBar只需要在app.json里配置好相关tab选项就可以了。 - 官方的自定义
tabBar需要在根目录定义一个自定义组件，下面会细说，并且目前官方自定义tabBar第一次切换tab的时候屏幕会闪，体验很不好，不知道以后会不会优化，不提倡使用。 - 另外还有自己实现的类似
tab的功能，这里就不说了。
官方原生tabBar
-
需要在
app.json配置以下tabBar选项"tabBar": { "color": "#ff0000", //颜色 "selectedColor": "#ffff00", //选中时的颜色 "backgroundColor": "#1697eb", //tab背景色 "borderStyle": "black", //tabBar盒子上面的border颜色，只支持black 与 white "list": [ { "pagePath": "pages/tabOne/tabOne", //此处路径要写不带 ‘/’的 "text": "1号", //tab名字 "iconPath": "image/icon_API.png", //tab图标 "selectedIconPath": "image/icon_API_HL.png" //选中时的tab图标 }, { "pagePath": "pages/tabTwo/tabTwo", "text": "2号", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png" }, { "pagePath": "pages/tabThree/tabThree", "text": "3号", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png" }, { "pagePath": "pages/tabFour/tabFour", "text": "4号", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png" }, { "pagePath": "pages/tabFive/tabFive", "text": "5号", "iconPath": "image/icon_API.png", "selectedIconPath": "image/icon_API_HL.png" } ], "position": "bottom", //tabBar的位置 top 或 bottom "custom": false //自定义tabBar时为true }
官方自定义tabBar
在原生
tabBar的基础上，把app.json里的custom设为true在跟目录新建一个自定义组件
custom-tab-bar(名字不能错)-
下面是具体代码
cunsom-tab-bar/index.js Component({ data: { selected: 0, color: "#7A7E83", selectedColor: "#3cc51f", "list": [ { "pagePath": "/pages/tabOne/tabOne", "text": "1号", "iconPath": "/image/icon_API.png", "selectedIconPath": "/image/icon_API_HL.png" }, { "pagePath": "/pages/tabTwo/tabTwo", "text": "2号", "iconPath": "/image/icon_API.png", "selectedIconPath": "/image/icon_API_HL.png" }, { "pagePath": "/pages/tabThree/tabThree", "text": "3号", "iconPath": "/image/icon_API.png", "selectedIconPath": "/image/icon_API_HL.png" }, { "pagePath": "/pages/tabFour/tabFour", "text": "4号", "iconPath": "/image/icon_API.png", "selectedIconPath": "/image/icon_API_HL.png" }, { "pagePath": "/pages/tabFive/tabFive", "text": "5号", "iconPath": "/image/icon_API.png", "selectedIconPath": "/image/icon_API_HL.png" } ], }, attached() { }, methods: { switchTab(e) { const data = e.currentTarget.dataset const url = data.path //切换tab时，改变路由地址 wx.switchTab({url}) this.setData({ //切换tab时，改变当前激活的序号，改变tab颜色图标等样式 selected: data.index }) } } })custom-tab-bar/index.wxml <!--miniprogram/custom-tab-bar/index.wxml--> <cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab"> <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image> <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view> </cover-view> </cover-view>custom-bab-bar/index.wxss .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; height: 48px; background: white; display: flex; padding-bottom: env(safe-area-inset-bottom); } .tab-bar-border { background-color: rgba(0, 0, 0, 0.33); position: absolute; left: 0; top: 0; width: 100%; height: 1px; transform: scaleY(0.5); } .tab-bar-item { flex: 1; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column; } .tab-bar-item cover-image { width: 27px; height: 27px; } .tab-bar-item cover-view { font-size: 10px; }custom-tab-bar/index.json { "component": true }另外还需要在每个
tab页面里的tab.json配置usingComponents选项还有在每个
tab页面的onShow生命周期函数里加上以下代码/** * 生命周期函数--监听页面显示 */ onShow: function () { if (typeof this.getTabBar === 'function' && this.getTabBar()) { this.getTabBar().setData({ //就是页面显示出来后，让相应的tab改变颜色 图标等样式，也就是这一步可能造成的自定义tab会闪屏 selected: 3 }) } },
