1. 程式人生 > >微信小程式把玩(三十九)navigation API

微信小程式把玩(三十九)navigation API

這裡寫圖片描述

演示效果也看到了小程式也就提供這幾個處理導航控制。值得注意的是只能同時導航五個頁面

主要屬性:

導航條一些方法

wx.setNavigationBarTitle(object) 設定導航條的Title

導航標題可以通過三種方式設定,第一種是通過全域性配置名字統一,第二種就是在page中新建個json檔案配置它會覆蓋全域性配置的title,第三種就是通過API設定。

  • 這裡寫圖片描述

wx.showNavigationBarLoading()設定在導航條上顯示Loading載入狀態

wx.hideNavigationBarLoading() 隱藏Loading載入狀態

導航檢視的一些方法

wx.navigateTo() 保留當前頁面進行跳轉,傳參時就像拼接GET引數一樣即可,程式碼中會有體現

  • 這裡寫圖片描述

wx.redirectTo() 銷燬當前頁面進行跳轉,

  • 這裡寫圖片描述

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(){
    // 頁面關閉
  }
})