swan.setTabBarStyle

解释：动态设置 tabBar 的整体样式

方法参数

Object object

object参数说明

示例

扫码体验

请使用百度APP扫码

代码示例1 动态设置

在开发者工具中预览效果

  1. Page({    onTabItemTap(item) {        console.log(item.index);        if(item.index == 0){            setTabBarStyle('#FFFFBD')        }        else if(item.index == 1){            setTabBarStyle('#FFFFBE')        }        else {            setTabBarStyle('#FFFFBF')        }    }    setTabBarStyle(bg) {        swan.setTabBarStyle({            color: '#000',// black            selectedColor: '#FF0000',// red            backgroundColor: bg,            borderStyle: 'black',            success: function () {                console.log('setTabBarStyle success');            },            fail: function (err) {                console.log('setTabBarStyle fail', err);            }        });    }});

代码示例2 borderStyle为black

在开发者工具中预览效果

  1. Page({    setTabBarStyle() {        swan.setTabBarStyle({            color: '#000',// black            selectedColor: '#FF0000',// red            backgroundColor: '#FFFFBD',            borderStyle: 'black',            success: function () {                console.log('setTabBarStyle success');            },            fail: function (err) {                console.log('setTabBarStyle fail', err);            }        });    }});

代码示例3 borderStyle为white

在开发者工具中预览效果

  1. <view class="wrap">    <button type="primary" bindtap="setTabBarStyle">setTabBarStyle</button></view>
  1. Page({    setTabBarStyle() {        swan.setTabBarStyle({            color: '#000',// black            selectedColor: '#FF0000',// red            backgroundColor: '#FFFFBD',            borderStyle: 'white',            success: function () {                console.log('setTabBarStyle success');            },            fail: function (err) {                console.log('setTabBarStyle fail', err);            }        });    }});

代码示例4 tab的默认样式可在app.json中设置

在开发者工具中预览效果

  1. <view class="wrap">    <button type="primary" bindtap="setTabBarStyle">setTabBarStyle</button></view>
  1. "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