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


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 相关文章推荐
基于jquery的时间段实现代码
Aug 02 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
Nov 28 Javascript
深入探讨javascript中的数据类型
Mar 04 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
Dec 26 Javascript
完美实现js焦点轮播效果(一)
Mar 07 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
修改vue源码实现动态路由缓存的方法
Jan 21 Javascript
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
Mar 08 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结合表单实现一些简单功能的例子
2011/06/04 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
PHP中SESSION的注销与清除
2015/04/16 PHP
php开发时容易忘记的一些技术细节
2016/02/03 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
JavaScript 开发规范要求(图文并茂)
2010/06/11 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
JS获取url参数,JS发送json格式的POST请求方法
2018/03/29 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
Vue编程式跳转的实例代码详解
2019/07/10 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python抓取百度首页的方法
2015/05/19 Python
Win7 64位下python3.6.5安装配置图文教程
2020/10/27 Python
python实现泊松图像融合
2018/07/26 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
python递归法解决棋盘分割问题
2019/07/17 Python
python conda操作方法
2019/09/11 Python
Python字符串格式化f-string多种功能实现
2020/05/07 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
HTML5 File API改善网页上传功能
2009/08/19 HTML / CSS
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
策划主管的工作职责
2013/11/24 职场文书
《金钱的魔力》教学反思
2014/02/24 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
校庆活动策划方案
2014/06/05 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书