小程序动态设置当前页面的标题

0.03字数 206阅读 672

1.需求:从A页面跳转到B页面,要求页面导航标题根据不同的入口参数,设置不同的页面导航标题

2.前面的wx.switchTab已经介绍过跳转到tabbar对应的相关页面的传参方式,这里要介绍的是普通的传参方式,举个例子:

urlTo = '/pages/home/list/list?title='+title+'&key='+ key; 
wx.switchTab({ url: urlTo }) 

在/pages/home/list/list页面接收参数

if(!options.title){
        wx.showNavigationBarLoading();
}else{
        wx.hideNavigationBarLoading();
        wx.setNavigationBarTitle({
            title: options.title
        });
}

wx.showNavigationBarLoading();在当前页面显示导航条加载动画
wx.hideNavigationBarLoading();隐藏导航条加载动画
wx.setNavigationBarTitle是动态设置当前页面的标题。

当然它有几个参数配置 wx.setNavigationBarTitle(object)

title    String     是   页面标题
success  Function   否   接口调用成功的回调函数
fail     Function   否   接口调用失败的回调函数
complete Function   否   接口调用结束的回调函数(调用成功、失败都会执行)

当然,也可以动态设置导航栏一些配置项:比如背景色,字体,以及成功或者失败的回调

wx.setNavigationBarColor(object)
**配置项**
frontColor  String  必填  前景颜色值,包括按钮、标题、状态栏的颜色,仅支持 #ffffff 和 #000000
backgroundColor String  必填  背景颜色值,有效值为十六进制颜色
animation   Object  可选  动画效果
animation.duration  Number  可选  动画变化时间,默认0,单位:毫秒
animation.timingFunc    String    可选    动画变化方式,默认 linear
success Function    可选  接口调用成功的回调函数
fail    Function    可选  接口调用失败的回调函数
complete    Function    可选    接口调用结束的回调函数(调用成功、失败都会执行)

个人git: https://github.com/leezhang521

推荐阅读更多精彩内容