百度智能小程序 動態(tài)設置整體樣式

swan.setTabBarStyle

解釋：動態(tài)設置 tabBar 的整體樣式，底部標簽欄位于小程序底部，方便用戶在不同功能模塊之間進行快速切換。為保證可用性，底部導航欄承載 2-5 個功能，如果超出 5 個功能項，請酌情移入頁面或菜單內。設計文檔詳見 底部標簽欄。

方法參數(shù)

Object object

object參數(shù)說明

示例

圖片示例

代碼示例 1 - 動態(tài)設置 

在開發(fā)者工具中打開

<view class="wrap">
    <button type="primary" bindtap="customStyle">
        {{ !hasCustomedStyle ? '自定義Tab樣式' : '移除自定義樣式'}}
    </button>
</view>

Page({
    data: {
        defaultTabBarStyle: {
            color: '#7A7E83',
            selectedColor: '#3cc51f',
            backgroundColor: '#ffffff'
        },
        defaultItemName: '接口'
    },
    customStyle() {
        if (this.data.hasCustomedStyle) {
            this.removeCustomStyle()
            return
        }
        this.setData({hasCustomedStyle: true})
        swan.setTabBarStyle({
            color: '#FFF',
            selectedColor: '#1AAD19',
            backgroundColor: '#000000'
        })
    },

    removeCustomStyle() {
        this.setData({hasCustomedStyle: false})
        swan.setTabBarStyle(this.data.defaultTabBarStyle)
    }
});

設計指南

標簽項應明確區(qū)分默認態(tài)和選中態(tài)，方便用戶定位當前所在位置；圖標風格應保存一致；每個標簽項的文字信息不應超出 5 個中文字符，否則將被截斷。

配置背景顏色時，請注意整體頁面效果、及標簽項的可讀性和可用性。

代碼示例 2 - 設置 borderStyle 

在開發(fā)者工具中打開

Page({
    setTabBarStyle() {
        swan.setTabBarStyle({
            color: '#000', // black
            selectedColor: '#FF0000', // red
            backgroundColor: '#FFFFBD',
            borderStyle: 'black', // 可選值還有white
            success: () => {
                console.log('setTabBarStyle success');
            },
            fail: err => {
                console.log('setTabBarStyle fail', err);
            }
        });
    }
});

代碼示例 3 - tab 的默認樣式可在 app.json 中設置 

在開發(fā)者工具中打開

"tabBar": {
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "首頁",
            "iconPath":"/images/API_normal.png",
            "selectedIconPath":"/images/API_selected.png"
    },
        {
            "pagePath": "pages/detail/detail",
            "text": "詳情",
            "iconPath":"/images/component_normal.png",
            "selectedIconPath":"/images/component_selected.png"
        }
    ],
    "backgroundColor" : "#ffffff",
    "borderStyle": "white",
    "color": "#000",
    "selectedColor": "#6495ED"
}

錯誤碼

Android

iOS