小程序教程

微信小程序把玩（三十九）navigation API

字号+ 作者： 来源： 2016-11-23 09:49 我要评论( )

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

主要属性：

导航条一些方法

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

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


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

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

导航视图的一些方法

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


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


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

wxml

  1. <button type="primary" bindtap="setNavigationBarTitle">设置navigationBarTitle</button>
  2. <button type="primary" bindtap="showNavigationBarLoading">设置navigationBarLoading加载状态</button>
  3. <button type="primary" bindtap="hiddenNavigationBarLoading">隐藏navigationBarLoading加载状态</button>
  4. <button type="warn" bindtap="navigateTo"> 保留当前页跳转</button>
  5. <button type="warn" bindtap="redirectTo"> 不保留当前页面跳转</button>
  6. <button type="warn" bindtap="navigateBack">退回到上一个页面</button>
复制代码

json

  1. {
  2.     "navigationBarTitleText": "我是通过json配置的title"
  3. }
复制代码

js

  1. //导入另一个页面
  2. var file = '../audio/audio'
  3. Page({
  4.   data:{
  5.     text:"Page navigation"
  6.   },
  7.   onLoad:function(options){
  8.     // 页面初始化 options为页面跳转所带来的参数
  9.   },
  10.   /**
  11.    * 设置NavigationTitle
  12.    */
  13.   setNavigationBarTitle: function() {
  14.     wx.setNavigationBarTitle({
  15.       title: '我是通过API设置的NavigationBarTitle'
  16.     })
  17.   },

  19.   /**
  20.    * 设置加载状态
  21.    */
  22.   showNavigationBarLoading: function() {
  23.     wx.showNavigationBarLoading()
  24.   },

  26.   /**
  27.    * 隐藏加载状态
  28.    */
  29.   hiddenNavigationBarLoading: function() {
  30.     wx.hideNavigationBarLoading()
  31.   },

  33.   /**
  34.    * 保留当前Page跳转
  35.    */
  36.   navigateTo: function() {
  37.     wx.navigateTo({
  38.       //传递参数方式向get请求拼接参数一样
  39.       url: file + '?phone=18939571&password=1992',
  40.       success: function(res) {
  41.         console.log(res)
  42.       },
  43.       fail: function(err) {
  44.         console.log(err)
  45.       }

  47.     })
  48.   },
  49.   /**
  50.    * 关闭当前页面进行跳转当前页面会销毁
  51.    */
  52.   redirectTo: function() {
  53.     wx.redirectTo({
  54.        //传递参数方式向get请求拼接参数一样
  55.       url: file + '?phone=189395719&password=1992'
  56.     })
  57.   },
  58.   /**
  59.    * 退回到上一个页面
  60.    */
  61.   navigateBack: function() {
  62.     wx.navigateBack()
  63.   },
  64.   onReady:function(){
  65.     // 页面渲染完成
  66.   },
  67.   onShow:function(){
  68.     // 页面显示
  69.   },
  70.   onHide:function(){
  71.     // 页面隐藏
  72.   },
  73.   onUnload:function(){
  74.     // 页面关闭
  75.   }
  76. })
复制代码


　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
精彩导读
2-HelloWorld微信小程序

2-HelloWorld微信小程序

微信小程序 轮播图 swiper图片组件

微信小程序 轮播图 swiper图片组件

微信小程序开发记账应用实战服务端之用户注册与登录

微信小程序开发记账应用实战服务端之用户注册

微信小程序倒计时组件

微信小程序倒计时组件

微信小程序实现购物车页面

微信小程序实现购物车页面

热门资讯
Copyright © 2006-2018 www.h5cn.com.H5之家 版权所有 Power by h5cn 备案： 黔ICP备15004751-2
HTML5入门 HTML5技术 canvas教程 专题学习