创新互联百度小程序教程:swan.setNavigationBarColor

  • swan.setNavigationBarColor
    • 方法参数
      • object 参数说明
      • animation 参数说明
      • animation.timingFunc 有效值
    • 示例
      • 代码示例 1
      • 代码示例 2
    • 错误码
      • Android
      • iOS
    • 常见问题
      • Q:如何设置透明胶囊?

    swan.setNavigationBarColor

    解释:动态设置当前页面导航条的颜色。

    方法参数

    Object object

    object 参数说明

    属性名 类型 必填 默认值 说明

    frontColor

    String

    前景颜色值,包括按钮、标题、状态栏的颜色,有效值 #ffffff 和 #000000

    backgroundColor

    String

    背景颜色值,有效值为十六进制颜色

    animation

    Object

    动画效果

    success

    Function

    接口调用成功的回调函数

    fail

    Function

    接口调用失败的回调函数

    complete

    Function

    接口调用结束的回调函数(调用成功、失败都会执行)

    animation 参数说明

    属性名 类型 必填 默认值 说明
    duration Number 0 动画变化时间(单位:毫秒)
    timingFunc String linear 动画变化方式

    animation.timingFunc 有效值

    说明
    linear 动画从头到尾的速度是相同的。
    easeIn 动画以低速开始
    easeOut 动画以低速结束。
    easeInOut 动画以低速开始和结束。

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例 1

    • SWAN
    • JS
     
     
     
    1. 黑色前景色
    2. fontColor='#000000'
    3. backgroundColor='#ffffff'

    代码示例 2

    • SWAN
    • JS
     
     
     
    1. 白色前景色
    2. fontColor='#ffffff'
    3. backgroundColor='#3388FF'

    设计指南

    配置导航栏背景色颜色值(backgroundColor)时应注意前景颜色值(frontColor)的可读性和阅读舒适度,且与小程序风格统一。

    错误

    前景颜色值为黑色时(#000000),应避免使用高饱和度或较深的背景颜色。

    错误

    前景颜色值为白色时(#ffffff),应避免使用较浅的背景颜色。

    错误码

    Android

    错误码 说明

    1001

    执行失败

    iOS

    错误码 说明

    202

    解析失败,请检查参数是否正确

    常见问题

    Q:如何设置透明胶囊?

    A:如下代码示例。

     
     
     
    1. swan.setNavigationBarColor({
    2. frontColor: '#ffffff',
    3. backgroundColor: '#000000'
    4. });

    当前文章:创新互联百度小程序教程:swan.setNavigationBarColor
    URL分享:http://www.shufengxianlan.com/qtweb/news15/456315.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

    声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联