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


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获取数组任意个不重复的随机数组元素
Mar 15 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
ajax级联菜单实现方法实例分析
Nov 28 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
详解Angular5 服务端渲染实战
Jan 04 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
Dec 11 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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后期静态绑定之self::限制实例分析
2018/12/21 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
基于PHP实现生成随机水印图片
2020/12/09 PHP
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
JS获取鼠标选中的文字
2016/08/10 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
ant-design表单处理和常用方法及自定义验证操作
2020/10/27 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python实现网站注册验证码生成类
2017/06/08 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
基于Python实现简单学生管理系统
2020/07/24 Python
IE支持HTML5的解决方法
2009/10/20 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
西班牙高科技产品购物网站:MejorDeseo
2019/09/08 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
幼师自荐信范文
2013/10/06 职场文书
营销与策划专业毕业生求职信
2013/11/01 职场文书
网站开发实习生的自我评价
2013/12/11 职场文书
护理专业自荐信范文
2014/02/26 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
我的小天地教学反思
2014/04/30 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
教师素质教育心得体会
2016/01/19 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
2021年最新用于图像处理的Python库总结
2021/06/15 Python