百度小程序---设置顶部tabBer

先上效果图

image

首先在app.josn中设置tabBar

image

"tabBar": {

        "list": [{

                "pagePath": "pages/index/index",

                "text": "首页",

                "iconPath": "./images/tabBar/home.png",

                "selectedIconPath": "./images/tabBar/home1.png"

            },

            {

                "pagePath": "pages/product/product",

                "text": "产品",

                "iconPath": "./images/tabBar/product.png",

                "selectedIconPath": "./images/tabBar/product1.png"

            },

            {

                "pagePath": "pages/message/message",

                "text": "拨号",

                "iconPath": "./images/tabBar/message.png",

                "selectedIconPath": "./images/tabBar/message1.png"

            }

        ],

        "position":"bottom",

        "backgroundColor": "#ffffff",

        "borderStyle": "white",

        "color": "#666666",

        "selectedColor": "#7BA6EF"

    },

API：

pagePath：跳转链接

text：显示的文字

iconPath：未选中时候的icon图标

selectedIconPath：选中时icon图标

selectedColor：选中时候的颜色”

app.josn代码如下

{

    "pages": [

        "pages/index/index",

        "pages/product/product",

        "pages/message/message"

    ],

    "tabBar": {

        "list": [{

                "pagePath": "pages/index/index",

                "text": "首页",

                "iconPath": "./images/tabBar/home.png",

                "selectedIconPath": "./images/tabBar/home1.png"

            },

            {

                "pagePath": "pages/product/product",

                "text": "产品",

                "iconPath": "./images/tabBar/product.png",

                "selectedIconPath": "./images/tabBar/product1.png"

            },

            {

                "pagePath": "pages/message/message",

                "text": "拨号",

                "iconPath": "./images/tabBar/message.png",

                "selectedIconPath": "./images/tabBar/message1.png"

            }

        ],

        "position":"bottom",

        "backgroundColor": "#ffffff",

        "borderStyle": "white",

        "color": "#666666",

        "selectedColor": "#7BA6EF"

    },

    "window": {

        "navigationBarBackgroundColor": "#ffffff",

        "navigationBarTextStyle": "black",

        "navigationBarTitleText": "百度智能小程序",

        "backgroundTextStyle": "light"

    }

}

window中navigationBarTitleText内容为小程序顶部文字需要在pages页面单独设置