How to solve the problem of WeChat Mini Programs customizing tabbar
This article mainly introduces "WeChat Mini Programs custom tabbar problem how to solve" related knowledge, the editor through the actual case to show you the operation process, the operation method is simple and fast, practical, I hope that this "WeChat Mini Programs custom tabbar problem how to solve" article can help you solve the problem.
1. First define tabbar "tabBar" in app.json according to official components: {"custom": true, "backgroundColor": "# FFFFFF", "borderStyle": "white", "list": [{"pagePath": "pages/index/index", "text": "homepage", "iconPath": ". / images/home.png" "selectedIconPath": ". / images/home.png"}, {"pagePath": "pages/me/me", "text": "personal Center", "iconPath": ". / images/me.png", "selectedIconPath": ". / images/me.png"}]}, "usingComponents": {} 2. Create custom tabbar components in the project root directory
Highlight: root directory. Please see the figure below. Not putting the root directory will result in this.getTabBar = null.
3. The components are as follows:
Custom-tab-bar/index.js
Component ({data: {selected: 0, color: "# 7A7E83", selectedColor: "# 3cc51f", list: [{pagePath: ".. / pages/index/index", iconPath: ".. / images/home.png", selectedIconPath: ".. / images/home.png", text: "homepage"}, {pagePath: ".. /.. / pages/me/me" IconPath: ".. / images/me.png", selectedIconPath: ".. / images/me.png", text: "personal Center"}}, attached () {} Methods: {switchTab (e) {const data = e.currentTarget.dataset const url = data.path wx.switchTab ({url}) this.setData ({selected: data.index})}})
Custom-tab-bar/index.json
{"component": true}
Custom-tab-bar/index.wxml
{{item.text}}
Custom-tab-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;} 4. Each page component under pages introduces tabbar
Take the home page as an example:
Pages/index.json
{"usingComponents": {"custom-tab-bar": ".. /.. / custom-tab-bar/index"}}
Pages/index.js
Page ({onShow: function () {if (typeof this.getTabBar = 'function' & & this.getTabBar ()) {this.getTabBar () .setData ({selected: 0})}}))
Pages/index.wxml
This is the end of the content about "how to solve the WeChat Mini Programs custom tabbar problem". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
