微信小程序 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 相关文章推荐
百度留言本js 大家可以参考下
Oct 13 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
五个jQuery图片画廊插件 推荐
May 12 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
理解javascript中的严格模式
Feb 01 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
React Native基础入门之调试React Native应用的一小步
Jul 02 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 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中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
PHP取余函数介绍MOD(x,y)与x%y
2014/05/15 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
php生成word并下载代码实例
2019/03/15 PHP
JSQL SQLProxy 的 php 版本代码
2010/05/05 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
js中通过split函数分割字符串成数组小例子
2013/09/21 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
Jquery 实现table样式的设定
2015/01/28 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
Python画图学习入门教程
2016/07/01 Python
Python人脸识别初探
2017/12/21 Python
scrapy爬虫完整实例
2018/01/25 Python
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
django 控制页面跳转的例子
2019/08/06 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
python实现滑雪者小游戏
2020/02/22 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
教导处工作制度
2014/01/18 职场文书
运动会广播稿30字
2014/01/21 职场文书
党支部审查意见
2015/06/02 职场文书
MySQL脏读,幻读和不可重复读
2022/05/11 MySQL