微信小程序实现的动态设置导航栏标题功能示例


Posted in Javascript onJanuary 31, 2019

本文实例讲述了微信小程序实现的动态设置导航栏标题功能。分享给大家供大家参考,具体如下:

场景

当从一个分类列表页面进入到一个详情页面的时候,由于这个详情页面是公用的,为了区分页面,就会设置该页面的导航用以区分。就需要开发者在页面加载的时候进行动态设置导航标题!

实现API

wx.setNavigationBarTitle(OBJECT)

语法

wx.setNavigationBarTitle({
 title: '当前页面',  //页面标题
 success: () => {},  //接口调用成功的回调函数
 fail: () => {},   //接口调用失败的回调函数
 complete: () => {}  //接口调用结束的回调函数(调用成功、失败都会执行)
})

开发DEMO

list.wxml

1. 在navigator标签的url设置两个参数;

2. 一个分类ID—用于详情页面请求对应分类的详细数据;

3. 一个分类名称—用于本次博客的主要作用,设置导航栏标题。

<navigator url="../../pages/shopList/shopList?navId={{item.supplierTypeID}}&navName={{item.supplierTypeName}}">
  <image class="rui-nav-icon" src="{{item.supplierTypePic}}"></image>
  <text class='rui-nav-text'>{{item.supplierTypeName}}</text>
</navigator>

detail.js

1. 获取URL传递到子页面的参数—在onLoad函数opts.navName

2. 三元表达式判断opts.navName参数是否为空,如果为空直接设置为商铺列表,否则进行拼接;

3. 用setNavigationBarTitle API实现导航标题的动态设置。

Page({
  onLoad(opts){
    // 设置导航栏为对应导航
    wx.setNavigationBarTitle({
      title: (opts.navName != '' ? opts.navName : '') + '商铺列表'
    })
  }
})

实际应用效果图

微信小程序实现的动态设置导航栏标题功能示例

希望本文所述对大家微信小程序开发有所帮助。

Javascript 相关文章推荐
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
iframe窗口高度自适应的实现方法
Jan 08 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
js实现照片墙功能实例
Feb 05 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
Bootstrap CSS布局之表格
Dec 17 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
Sep 19 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 #Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 #Javascript
JS栈stack类的实现与使用方法示例
Jan 31 #Javascript
JQuery中queue方法用法示例
Jan 31 #jQuery
JavaScript两种计时器的实例讲解
Jan 31 #Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 #Javascript
实例讲解v-if和v-show的区别
Jan 31 #Javascript
You might like
php数据库抽象层 PDO
2011/05/07 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
在线游戏大家来找茬II
2006/09/30 Javascript
jquery简单体验
2007/01/10 Javascript
学习YUI.Ext 第三天
2007/03/10 Javascript
CSS JavaScript 实现菜单功能 改进版
2008/12/09 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
2015/03/04 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
2017/12/24 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
p5.js实现简单货车运动动画
2019/10/23 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
浅谈python对象数据的读写权限
2016/09/12 Python
快速实现基于Python的微信聊天机器人示例代码
2017/03/03 Python
python处理xml文件的方法小结
2017/05/02 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
利用Python代码实现一键抠背景功能
2019/12/29 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
生日派对邀请函
2014/01/13 职场文书
岗位说明书怎么写
2014/07/30 职场文书
大型公益活动策划方案
2014/08/20 职场文书
黄石寨导游词
2015/02/05 职场文书
努力学习保证书
2015/02/26 职场文书
护士岗位竞聘书
2015/09/15 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
一篇文章看懂MySQL主从复制与读写分离
2021/11/07 MySQL