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


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操作select控件的几种方法
Jun 02 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
p5.js入门教程之键盘交互
Mar 19 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
详解Vue Cli浏览器兼容性实践
Jun 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实现监控varnish缓存服务器的状态
2014/12/30 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
基于jquery封装的一个js分页
2011/11/15 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
nodejs实例解析(输出hello world)
2017/01/03 NodeJs
Vue.js基础知识小结
2017/01/13 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
详解Angular6 热加载配置方案
2018/08/18 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
原生JS无缝滑动轮播图
2019/10/22 Javascript
解决vue.js提交数组时出现数组下标的问题
2019/11/05 Javascript
前端性能优化建议
2020/09/17 Javascript
[33:42]LGD vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
让python的Cookie.py模块支持冒号做key的方法
2010/12/28 Python
Python操作列表的常用方法分享
2014/02/13 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
我们为什么要减少Python中循环的使用
2019/07/10 Python
python中栈的原理及实现方法示例
2019/11/27 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
css sprite简单实例
2016/05/23 HTML / CSS
2014年元旦促销活动方案
2014/02/22 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
付款委托书范本
2014/10/05 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
小学英语课教学反思
2016/02/15 职场文书
SQL 聚合、分组和排序
2021/11/11 MySQL