前言

navigationBarTitleText用于小程序设置当前页面标题,可以给每个页面设置独立的标题,但是这样不能满足一些特殊业务场景;比如说商城,商品详情页面的标题,会根据获取到的数据动态修改,下面就来说说如何动态修改标题以及导航条相关设置。

正文

一、wx.setNavigationBarTitle

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

"window": {
    "navigationBarTitleText": "华美整呗"
}

2.单独设置页面标题,在对应页面json文件里设置(子页面设置会覆盖通用设置):

{
    "navigationBarTitleText": "首页"
}

3.动态设置,比如说:我们从接口拿到商品名称后,把商品名称设置到标题上

wx.request({
    url: "请求接口url",
    method: "POST",
    data: {},
    success: function (res) {
        if (res.data.code == 200) {
            // 修改navigationBarTitleText
            wx.setNavigationBarTitle({
                title: goods_name
            })
        }
    }
})

tips:动态设置 > 页面独立设置 > 通用设置

效果图:
在这里插入图片描述
当然,另外我们可以通过点击事件来动态设置标题:

test: function () {
    wx.setNavigationBarTitle({
        title: "我是点击后的标题"
    })
}

效果图:
在这里插入图片描述

二、wx.setNavigationBarColor

设置页面导航条颜色

wx.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#ff0000',
    animation: {
        duration: 400,
        timingFunc: 'easeIn'
    }
})
  • frontColor:前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000
  • backgroundColor:背景颜色值,有效值为十六进制颜色
  • animation:动画效果
    ①animation的结构包括:duration,timingFunc;
    ②timingFunc:linear(动画从头到尾的速度是相同的),easeIn(动画以低速开始),easeOut(动画以低速结束),easeInOut(动画以低速开始和结束)

效果图:
在这里插入图片描述

三、wx.showNavigationBarLoading和wx.hideNavigationBarLoading

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

index.wxml

<button bindtap="showLoading">显示加载动画</button>
<button bindtap="hideLoading">隐藏加载动画</button>

index.js

// 显示加载动画
showLoading: function () {
    wx.showNavigationBarLoading()
},
// 隐藏加载动画
hideLoading: function () {
    wx.hideNavigationBarLoading()
}

效果图:
在这里插入图片描述

四、wx.hideHomeButton

隐藏返回首页按钮。微信7.0.7版本起,当用户打开的小程序最底层页面是非首页时,默认展示“返回首页”按钮,开发者可在页面 onShow 中调用 hideHomeButton 进行隐藏。

onShow: function(){
    wx.hideHomeButton();
}

效果图(隐藏箭头所指处):
在这里插入图片描述

总结