小技巧大用处：微信小程序状态栏设置全攻略-Toy模板网

这篇具有很好参考价值的文章主要介绍了小技巧大用处：微信小程序状态栏设置全攻略。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

我们在使用微信小程序的时候，经常会发现小程序的状态栏与我们手机的状态栏不太一致。有时候状态栏的颜色与我们小程序的主题色不相符，有时候状态栏的文字内容也不太符合我们的需求。为了解决这些问题，我们需要对微信小程序的状态栏进行动态设置。在本文中，我们将探讨如何通过代码实现微信小程序状态栏的动态设置，让我们的小程序更加美观与实用。

一、标题

1.设置整个小程序通用标题，在 app.json 里设置

"window": {
    "navigationBarTitleText": "默认标题"
}

微信小程序状态栏,小程序,前端,微信小程序

2.单独设置页面标题，在对应页面 json 文件里设置（子页面设置会覆盖通用设置）：

{
    "navigationBarTitleText": "demo"
}

微信小程序状态栏,小程序,前端,微信小程序

3.动态设置：

<view>
    <button bindtap="clickOn">点击我改变标题</button>
</view>

Page({
    clickOn() {
        wx.setNavigationBarTitle({
            title: '修改title',
        })
    },
})

展示效果

微信小程序状态栏,小程序,前端,微信小程序

二、背景色

frontColor 前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000
backgroundColor 背景颜色值，有效值为十六进制颜色
animation 动画效果

animation 的结构包括：duration 和 timingFunc。

duration 表示动画的时间。

timingFunc

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

<view>
    <button bindtap="clickOn">点击我改变状态栏背景色</button>
</view>

Page({
    clickOn() {
        wx.setNavigationBarColor({
            frontColor: '#ffffff',
            backgroundColor: '#48D1CC',
            animation: {
                duration: 1000,
                timingFunc: 'easeInOut'
            }
        })
    },
})

展示效果

微信小程序状态栏,小程序,前端,微信小程序

三、状态栏加载

wx.showNavigationBarLoading：在当前页面显示导航条加载动画
wx.hideNavigationBarLoading：在当前页面隐藏导航条加载动画

<view>
    <button bindtap="showCartoon">显示加载动画</button>
    <button bindtap="hideCartoon">隐藏加载动画</button>
</view>

Page({
    // 显示加载动画
    showCartoon() {
        wx.showNavigationBarLoading()
    },
    // 隐藏加载动画
    hideCartoon() {
        wx.hideNavigationBarLoading()
    }
})