Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.