The style of the title bar of Mini Program takeout and how to add the bottom column

The editor of this article introduces in detail "the style of the title bar of Mini Program takeout and how to add the bottom column". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "the style of the title bar of takeout Mini Program and how to add the bottom column" can help you solve your doubts.

Adding the bottom column and the title bar style is a very basic structure of Mini Program. Here's an example of Meituan takeout:

Meituan takeout title bar style configuration

1. "window": {

2. "navigationBarTitleText": "Meituan takeout +"

3. "navigationBarTextStyle": "white"

4. "navigationBarBackgroundColor": "# FFC640"

5.}

It is also configured in app.json, and the title bars of other pages take this as an example.

Meituan takeout adds bottom column.

1. "tabBar": {

2. "color": "# 272636"

3. "selectedColor": "# FFD161"

4. "backgroundColor": "# fff"

5. "borderStyle": "# a8a8a8"

6. "list": [

7. {

8. "pagePath": "pages/home/home"

9. "iconPath": "pages/images/home.png"

10. "selectedIconPath": "pages/images/home-selected.png"

11. "color": "white"

12. "text": "Home"

13.}

14. {

15. "pagePath": "pages/order/order"

16. "iconPath": "pages/images/order.png"

17. "selectedIconPath": "pages/images/order-selected.png"

18. "text": "order"

19.}

20. {

21. "pagePath": "pages/my/my"

22. "iconPath": "pages/images/my.png"

23. "selectedIconPath": "pages/images/my-selected.png"

24. "text": "mine"

25.}

26.]

27.}

Write the above code in app.json, which is a function of Mini Program. You only need to copy it. It is extremely convenient, and the results are as follows:

After reading this, the article "the style of the title bar of Mini Program takeout and how to add the bottom column" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it before you can understand it. If you want to know more about related articles, welcome to follow the industry information channel.