微信小程序 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中令你抓狂的魔术变量
Nov 30 Javascript
改版了网上的一个js操作userdata
Apr 27 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
js添加select下默认的option的value和text的方法
Oct 19 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
如何在Angular2中使用jQuery及其插件的方法
Feb 09 Javascript
纯JS实现轮播图
Feb 22 Javascript
vue动态改变背景图片demo分享
Sep 13 Javascript
Vuex 快速入门(简单易懂)
Sep 20 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 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代码实现页面伪静态的方法
2015/07/25 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
jquery实现文本框鼠标右击无效以及不能输入的代码
2010/11/05 Javascript
JS拖动技术 关于setCapture使用
2010/12/09 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
js实现当鼠标移到表格上时显示这一格全部内容的代码
2016/06/12 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
JS实现数组去重及数组内对象去重功能示例
2019/02/02 Javascript
angular 实现下拉列表组件的示例代码
2019/03/09 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
JS实现可切换图片的幻灯切换效果示例
2019/05/24 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
python获得一个月有多少天的方法
2015/06/04 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
详解Python绘图Turtle库
2019/10/12 Python
Pyqt5自适应布局实例
2019/12/13 Python
Radley英国官网:英国莱德利小狗包
2019/03/21 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
如何用JQuery进行表单验证
2013/05/29 面试题
Python里面search()和match()的区别
2016/09/21 面试题
教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
一篇文章弄懂Python中的内建函数
2021/08/07 Python
JavaScript 原型与原型链详情
2021/11/02 Javascript