微信小程序 navigation API實例詳解

更新時間：2016年10月02日 10:08:34 作者：順子_RTFSC

這篇文章主要介紹了微信小程序 navigation API實例詳解的相關(guān)資料,需要的朋友可以參考下

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

主要屬性：

導航條一些方法

wx.setNavigationBarTitle(object) 設(shè)置導航條的Title

導航標題可以通過三種方式設(shè)置，第一種是通過全局配置名字統(tǒng)一，第二種就是在page中新建個json文件配置它會覆蓋全局配置的title，第三種就是通過API設(shè)置。

wx.showNavigationBarLoading()設(shè)置在導航條上顯示Loading加載狀態(tài)

wx.hideNavigationBarLoading() 隱藏Loading加載狀態(tài)

導航視圖的一些方法

wx.navigateTo() 保留當前頁面進行跳轉(zhuǎn)，傳參時就像拼接GET參數(shù)一樣即可，代碼中會有體現(xiàn)

wx.redirectTo() 銷毀當前頁面進行跳轉(zhuǎn)，

wx.navigateBack() 返回上一個頁面

wxml

<button type="primary" bindtap="setNavigationBarTitle">設(shè)置navigationBarTitle</button>
<button type="primary" bindtap="showNavigationBarLoading">設(shè)置navigationBarLoading加載狀態(tài)</button>
<button type="primary" bindtap="hiddenNavigationBarLoading">隱藏navigationBarLoading加載狀態(tài)</button>
<button type="warn" bindtap="navigateTo"> 保留當前頁跳轉(zhuǎn)</button>
<button type="warn" bindtap="redirectTo"> 不保留當前頁面跳轉(zhuǎn)</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為頁面跳轉(zhuǎn)所帶來的參數(shù)
 },
 /**
  * 設(shè)置NavigationTitle
  */
 setNavigationBarTitle: function() {
  wx.setNavigationBarTitle({
   title: '我是通過API設(shè)置的NavigationBarTitle'
  })
 },

 /**
  * 設(shè)置加載狀態(tài)
  */
 showNavigationBarLoading: function() {
  wx.showNavigationBarLoading()
 },

 /**
  * 隱藏加載狀態(tài)
  */
 hiddenNavigationBarLoading: function() {
  wx.hideNavigationBarLoading()
 },

 /**
  * 保留當前Page跳轉(zhuǎn)
  */
 navigateTo: function() {
  wx.navigateTo({
   //傳遞參數(shù)方式向get請求拼接參數(shù)一樣
   url: file + '?phone=18939571&password=1992',
   success: function(res) {
    console.log(res)
   },
   fail: function(err) {
    console.log(err)
   }

  })
 },
 /**
  * 關(guān)閉當前頁面進行跳轉(zhuǎn)當前頁面會銷毀
  */
 redirectTo: function() {
  wx.redirectTo({
    //傳遞參數(shù)方式向get請求拼接參數(shù)一樣
   url: file + '?phone=189395719&password=1992'
  })
 },
 /**
  * 退回到上一個頁面
  */
 navigateBack: function() {
  wx.navigateBack()
 },
 onReady:function(){
  // 頁面渲染完成
 },
 onShow:function(){
  // 頁面顯示
 },
 onHide:function(){
  // 頁面隱藏
 },
 onUnload:function(){
  // 頁面關(guān)閉
 }
})

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: