微信小程序 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 相关文章推荐
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
Node.js异步I/O学习笔记
Nov 04 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
实现单层json按照key字母顺序排序的示例
Dec 06 Javascript
react native 获取地理位置的方法示例
Aug 28 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
vue+canvas实现拼图小游戏
Sep 18 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
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
PHP 实现缩略图
2021/03/09 PHP
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
判断javascript的数据类型(示例代码)
2013/12/11 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
AngularJS入门之动画
2016/07/27 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
Easyui使用Dialog行内按钮布局的实例
2017/07/27 Javascript
jQuery 实时保存页面动态添加的数据的示例
2017/08/14 jQuery
详解Angular如何正确的操作DOM
2018/07/06 Javascript
vue接入腾讯防水墙代码
2019/05/07 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
JavaScript This指向问题详解
2019/11/25 Javascript
JavaScript代码实现简单计算器
2020/12/27 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
详解python进行mp3格式判断
2016/12/23 Python
Python制作词云的方法
2018/01/03 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
基于Python实现扑克牌面试题
2019/12/11 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
python实现3D地图可视化
2020/03/25 Python
python交互模式基础知识点学习
2020/06/18 Python
澳大利亚药房在线:ThePharmacy
2017/10/04 全球购物
美国豪华时尚女性精品店:Kirna Zabête
2018/01/11 全球购物
.net开发工程师面试题
2014/02/25 面试题
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
初三学生个人自我评定
2014/04/06 职场文书
团日活动总结范文
2014/04/25 职场文书
员工考核评语大全
2014/04/26 职场文书
医院深入开展党的群众路线教育实践活动实施方案
2014/08/27 职场文书
工人先锋号申报材料
2014/12/29 职场文书