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

This article mainly introduces "Mini Program how to customize tabBar component encapsulation". In daily operation, I believe many people have doubts about how Mini Program customizes tabBar component encapsulation. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "Mini Program how to customize tabBar component encapsulation". Next, please follow the editor to study!

The details are as follows

1. Create a new component: create a new tabBar under component

2. The index.wxml structure of the component is as follows:

{{item.text}}

3. The index.wxss structure of the component is as follows:

.tab-bar {position: fixed; bottom: 0; left: 0; right: 0; height: 60px; 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: 28px; height: 28px; margin-bottom: 2px;} .tab-bar-item cover-view {font-size: 10px;}

4. The index.js structure of the component is as follows:

/ / pages/components/tabBar/index.jsComponent ({/ * 1. Component attribute list * / options: {multipleSlots: true / / enable multi-slot support in the options when the component is defined}, properties: {list: {type: Array, value: []}, selectedColor: {type: String, value:''}, color: {type: String, value:''},}, / * * 2. Initial data of the component * / data: {tabbarIndex: 0 tab / the first tab element is displayed by default}, lifetimes: {attached () {}}, / * * 3. Component's method list * / methods: {/ / component's click event tabChange (e) {/ / get the subscript let index = e.currentTarget.dataset.index of the bottom column element This.setData ({tabbarIndex:index,}) / / triggerEvent gets the click event name this.triggerEvent ('onMyEvent', {tabbarIndex:index,})},}} passed from the event / / onMyEvent page of the component

5. The index.json structure of the component is as follows:

{"component": true, "usingComponents": {}}

6. The use of components in the page

7. The json code of the page is as follows:

{"navigationBarTitleText": "Test", "usingComponents": {"mp-tabbar": ".. / components/tabBar/index"}}

8. The wxml code of the page is as follows:

/ / content displayed on the page when tab1 is selected 111111max / content displayed on the page when tab2 is selected 22222222 / content displayed on the page when tab3 is selected 333333

9. The js code of the page is as follows:

Page ({data: {tabbarIndex:0,// defaults to the first tab element color: "# 555555", selectedColor: "# 2ea7e0", / / bottom column list: [{"text": "Market", "iconPath": "/ images/bazaar.png", "selectedIconPath": "/ images/bazaar_selected.png",} {"text": "recharge", "iconPath": "/ images/recharge.png", "selectedIconPath": "/ images/recharge_selected.png",}, {"text": "team", "iconPath": "/ images/market.png", "selectedIconPath": "/ images/market_selected.png",}]} / * Lifecycle function-listening page shows * / onShow: function () {this.tabComponent = this.selectComponent ('# tabComponent') Let selectedColor = this.data.selectedColor; let color = this.data.color; this.tabComponent.setData ({selectedColor: selectedColor, color:color}) console.log (this.tabComponent.data.tabbarIndex)}, / / get the data passed by the component tabChange:function (e) {let index = e.detail.tabbarIndex This.setData ({tabbarIndex:index}) console.log (e.detail.tabbarIndex)}) at this point, the study on "how Mini Program customizes the tabBar component encapsulation" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.