[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText
前言
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(); }
效果图(隐藏箭头所指处):
总结
导航条相关都可以根据自己需求来进行设置,基本满足大多数需求。
如果需要自定义顶部导航,请前往文章:[自定义navigationBar顶部导航栏,兼容适配所有机型(完整案例)](https://www.wmlike.com/applet/29.html "自定义navigationBar顶部导航栏,兼容适配所有机型(完整案例)")
本站部分文章、数据、素材收集于网络,所有版权均归源网站或原作者所有!
如果侵犯了您的权益,请来信告知我们下线删除,邮箱:357234902@qq.com