微信小程序 navigation API实例详解


Posted in Javascript onOctober 02, 2016

微信小程序 navigation API实例详解

演示效果也看到了小程序也就提供这几个处理导航控制。值得注意的是只能同时导航五个页面

主要属性:

导航条一些方法

wx.setNavigationBarTitle(object) 设置导航条的Title

导航标题可以通过三种方式设置,第一种是通过全局配置名字统一,第二种就是在page中新建个json文件配置它会覆盖全局配置的title,第三种就是通过API设置。

微信小程序 navigation API实例详解

wx.showNavigationBarLoading()设置在导航条上显示Loading加载状态

wx.hideNavigationBarLoading() 隐藏Loading加载状态

导航视图的一些方法

wx.navigateTo() 保留当前页面进行跳转,传参时就像拼接GET参数一样即可,代码中会有体现

微信小程序 navigation API实例详解

wx.redirectTo() 销毁当前页面进行跳转,

微信小程序 navigation API实例详解

wx.navigateBack() 返回上一个页面

wxml

<button type="primary" bindtap="setNavigationBarTitle">设置navigationBarTitle</button>
<button type="primary" bindtap="showNavigationBarLoading">设置navigationBarLoading加载状态</button>
<button type="primary" bindtap="hiddenNavigationBarLoading">隐藏navigationBarLoading加载状态</button>
<button type="warn" bindtap="navigateTo"> 保留当前页跳转</button>
<button type="warn" bindtap="redirectTo"> 不保留当前页面跳转</button>
<button type="warn" bindtap="navigateBack">退回到上一个页面</button>

json

{
    "navigationBarTitleText": "我是通过json配置的title"
}

js

//导入另一个页面
var file = '../audio/audio'
Page({
 data:{
  text:"Page navigation"
 },
 onLoad:function(options){
  // 页面初始化 options为页面跳转所带来的参数
 },
 /**
  * 设置NavigationTitle
  */
 setNavigationBarTitle: function() {
  wx.setNavigationBarTitle({
   title: '我是通过API设置的NavigationBarTitle'
  })
 },

 /**
  * 设置加载状态
  */
 showNavigationBarLoading: function() {
  wx.showNavigationBarLoading()
 },

 /**
  * 隐藏加载状态
  */
 hiddenNavigationBarLoading: function() {
  wx.hideNavigationBarLoading()
 },

 /**
  * 保留当前Page跳转
  */
 navigateTo: function() {
  wx.navigateTo({
   //传递参数方式向get请求拼接参数一样
   url: file + '?phone=18939571&password=1992',
   success: function(res) {
    console.log(res)
   },
   fail: function(err) {
    console.log(err)
   }

  })
 },
 /**
  * 关闭当前页面进行跳转当前页面会销毁
  */
 redirectTo: function() {
  wx.redirectTo({
    //传递参数方式向get请求拼接参数一样
   url: file + '?phone=189395719&password=1992'
  })
 },
 /**
  * 退回到上一个页面
  */
 navigateBack: function() {
  wx.navigateBack()
 },
 onReady:function(){
  // 页面渲染完成
 },
 onShow:function(){
  // 页面显示
 },
 onHide:function(){
  // 页面隐藏
 },
 onUnload:function(){
  // 页面关闭
 }
})

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
Dec 06 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
简单的渐变轮播插件
Jan 12 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
使用原生javascript开发计算器实例代码
Feb 21 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 #Javascript
微信小程序 location API实例详解
Oct 02 #Javascript
微信小程序 Storage API实例详解
Oct 02 #Javascript
微信小程序 Video API实例详解
Oct 02 #Javascript
老生常谈JavaScript中的this关键字
Oct 01 #Javascript
ES6新特征数字、数组、字符串
Oct 01 #Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 #Javascript
You might like
smarty模板中拼接字符串的方法
2014/02/14 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
javascript replace()正则替换实现代码
2010/02/26 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
js 通用订单代码
2013/12/23 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
js选择器全面解析
2016/06/27 Javascript
多种方式实现js图片预览
2016/12/12 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
JS实现动态给标签控件添加事件的方法示例
2017/05/13 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
2018/08/24 Javascript
javascript实现的时间格式加8小时功能示例
2019/06/13 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
Python中decorator使用实例
2015/04/14 Python
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
浅析python的Lambda表达式
2019/02/27 Python
python调用webservice接口的实现
2019/07/12 Python
Tensorflow中的降维函数tf.reduce_*使用总结
2020/04/20 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
小学六年级学生评语
2014/04/22 职场文书
关于环保的演讲稿
2014/05/10 职场文书
教师节标语大全
2014/10/07 职场文书
通知的格式范文
2015/04/27 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
重阳节简报
2015/07/20 职场文书
Spring Boot 实现 WebSocket
2022/04/30 Java/Android