微信小程序> 微信小程序导航栏标题配置navigationBarTitleText及动态设置setNavigationBarTitle方法

微信小程序导航栏标题配置navigationBarTitleText及动态设置setNavigationBarTitle方法

浏览量:607 时间: 来源:梓喻

小程序包含一个描述整体程序的 app 和 多个描述各自页面的 page,它的主体部分由 app.js、app.json 和 app.wxss 三个存放在项目根目录的文件组成,而小程序具体的页面由 js、wxml、json、wxss四个存放在相应页面目录的文件组成。

导航栏标题文字内容 这些我们按照实际的需求去具体设置,比如如果需要对微信小程序进行 全局配置,我们就在小程序根目录下 app.json 文件里设置,如果只是对本页面的窗口设置可以直接在页面目录下 json 文件进行配置,另外我们还可以在相关的 js 文件里调用 wx.setNavigationBarTitle 方法动态设置导航栏标题。

1. 全局配置

当需要微信小程序进行 全局配置 导航栏标题时

//在根目录 app.json 里设置 navigationBarTitleText{"window":{"navigationBarTitleText" : "设置 全局 导航栏标题文字"}}

2.页面配置

直接需要指定 页面配置 导航栏标题时就到页面对应的目录下的 json 文件设置就好了

{"navigationBarTitleText" : "设置 指定页面 导航栏标题文字"}

ps:  页面配置中相关设置对应全局配置 app.json 中 window 对应的配置项,如果在指定页面目录的 json 文件设置了就会在指定页面覆盖 app.json 中 window 对应的配置项,另外由于上述内容对应 app.json 中的 window 属性的原因在指定页面目录的 json 文件里是不需要写 window 这个属性。

3.动态设置

在所需动态配置导航栏标题处可以 js 动态设置当前页面的标题

wx.setNavigationBarTitle({title:"动态设置 指定页面 导航栏标题文字"})

哈哈,发现没,文字很多会很超出去
小程序
值得注意的是,在动态设置导航栏标题文字时要在 生命周期 的 onReady 之后

onReady()
页面初次渲染完成时触发。一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

附上 setNavigationBarTitle 方法详细参数信息
Object object

属性类型默认值必填说明
titlestring页面标题
successfunction接口调用成功的回调函数
failfunction接口调用失败的回调函数
completefunction接口调用结束的回调函数(调用成功、失败都会执行)

小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎