[微信小程序] 动态设置页面标题、导航条 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) {// 修改navigationBarTitleTextwx.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();
}

效果图（隐藏箭头所指处）：

[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText相关推荐

微信小程序动态修改页面标题title
背景有这样一个需求,想动态修改微信小程序页面顶部的标题,应该如何操作呢? 做法一.首先看看静态修改微信小程序页面顶部的标题的做法. 通过修改页面json文件即可修改页面标题 {"navi ...
微信小程序--动态设置导航栏颜色
微信小程序--动态设置导航栏颜色既然要动态设置导航栏颜色,估计自定义导航栏也跑不了关于动态设置导航栏颜色,微信小程序官方文档给出了一个API: wx.setNavigationBarColor ...
微信小程序动态设置tab-bar
微信小程序动态设置tab-bar(自定义) 配置自定义tab-bar的方法这里省略,可以参考官方文档动态设置tab-bar 需求:根据权限判断底部tab-bar显示内容例如普通用户这里不显示赛事t ...
微信小程序动态生成页面2020-04-13
微信小程序动态生成页面我最近自己在做小程序参加竞赛,然后记录下自己的心得,希望对在座的各位有点帮助吧.然后我的Q:2991194667,有问题可以一起探讨. 1.首先是我打算做一个瀑布流的布局,像淘 ...
vue微信小程序开发(二)---页面以及导航
vue微信小程序开发(二)-菜单以及页面这里写目录标题 vue微信小程序开发(二)---菜单以及页面图标的选择创建并注册页面底部导航大家好,我是代码哈士奇,是一名软件学院网络工程的学生, ...
微信小程序动态设置 tabBar
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 使用微信提供的API wx.setTabBarItem(Object object) 动态设置 tabBar ...
微信小程序_点击二级导航条切换页面
gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动: 代码解说: 首先我在js自定义了navState参数用于判断导航的当前状态, 定义了data-index用于js中动态修改导航的当前状态, na ...
微信小程序中实现点击导航条切换页面（可左右滑动视图）
我录制了个gif如下,黄色部分是不可以滑动的,蓝色部分可以滑动. 代码解说: 首先我在js自定义了navState参数用于判断导航的当前状态, 定义了data-index用于js中动态修改导航的当前状 ...
微信小程序动态设置背景
wx.setBackgroundColor(Object object) 支持版本 >= 2.1.0 动态设置窗口的背景色 wx.setBackgroundColor({backgroundCo ...

[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText

前言

正文

一、wx.setNavigationBarTitle

二、wx.setNavigationBarColor

三、wx.showNavigationBarLoading和wx.hideNavigationBarLoading

四、wx.hideHomeButton

[微信小程序] 动态设置页面标题、导航条 navigationBarTitleText相关推荐

最新文章

热门文章