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


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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
js随机颜色代码的多种实现方式
Apr 23 Javascript
jQuery实现跨域iframe接口方法调用
Mar 14 Javascript
纯JS代码实现一键分享功能
Apr 20 Javascript
jquery弹出遮掩层效果【附实例代码】
Apr 28 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
微信头像地址失效踩坑记附带解决方案
Sep 23 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
介绍一下28个JS常用数组方法
May 06 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
session 的生命周期是多长
2006/10/09 PHP
Dedecms常用函数解析
2008/02/01 PHP
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
jquery 插件 任意位置浮动固定层
2008/12/25 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
在element-ui的select下拉框加上滚动加载
2019/04/18 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
vue input输入框关键字筛选检索列表数据展示
2020/10/26 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
[01:01:24]LGD vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python模拟登录的多种方法(四种)
2018/06/01 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
python统计字符串中字母出现次数代码实例
2020/03/02 Python
parser.add_argument中的action使用
2020/04/20 Python
django创建超级用户时指定添加其它字段方式
2020/05/14 Python
升级keras解决load_weights()中的未定义skip_mismatch关键字问题
2020/06/12 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
临床医学大学生求职信
2013/09/28 职场文书
自我评价优秀范文分享
2013/11/30 职场文书
五十岁生日宴会答谢词
2014/01/15 职场文书
经营目标管理责任书
2014/07/25 职场文书
运输公司工作总结
2015/08/11 职场文书
初中政治教师教学反思
2016/02/23 职场文书
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
Nginx文件已经存在全局反向代理问题排查记录
2022/07/15 Servers