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


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 相关文章推荐
DOM_window对象属性之--clipboardData对象操作代码
Feb 03 Javascript
javascript 单例/单体模式(Singleton)
Apr 07 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
Jul 12 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
JavaScript中的toLocaleDateString()方法使用简介
Jun 12 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
openlayers实现地图测距测面
Sep 25 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生成二维码的几种方式整理及使用实例
2013/06/03 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
利用ajax和PHP实现简单的流程管理
2017/03/23 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
JavaScript加强之自定义callback示例
2013/09/21 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
Bootstrap表单布局样式源代码
2016/07/04 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
详解vue mint-ui源码解析之loadmore组件
2017/10/11 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
JS实现导航栏楼层特效
2020/01/01 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Django添加feeds功能的示例
2018/08/07 Python
python实现三维拟合的方法
2018/12/29 Python
python安装requests库的实例代码
2019/06/25 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
python word转pdf代码实例
2019/08/16 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
如何通过python计算圆周率PI
2020/11/11 Python
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
教育学专业毕业生的自我评价
2013/11/21 职场文书
企业军训感想
2014/02/07 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
青奥会口号
2014/06/12 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
党委领导班子整改方案
2014/09/30 职场文书
python 模块重载的五种方法
2021/04/24 Python